如何检测用户何时滚动到 div 的底部？

在 Web 开发中，经常需要监测用户何时滚动到某个元素的底部，比如无限滚动、自动加载等场景，而滚动事件本身并不能直接获取元素是否滚动到底部的状态。下面介绍几种常用的方法来检测用户何时滚动到 div 的底部。

1. 使用 scroll 事件

scroll 事件可以检测到元素的滚动状态，通过判断元素的 scrollTop 和 scrollHeight，即可得到是否滚动到底部的状态。如下所示：

const element = document.getElementById("myDiv");

element.addEventListener("scroll", function () {
  if (element.scrollTop + element.clientHeight === element.scrollHeight) {
    console.log("已滚动到底部");
  }
});

以上代码添加了 scroll 事件监听器，每次滚动时都会触发该事件，然后通过 element.scrollTop 和 element.clientHeight 计算出当前滚动的位置和可见区域的高度，再加上 element.scrollHeight 就可以得到元素的总高度，如果它们的值相等，则表示已滚动到底部。

2. 使用 Intersection Observer API

Intersection Observer API 是一种现代的、异步的 API，可以用来观察一个元素与容器或视口是否发生交叉，支持监听元素的相对位置，包括滚动、尺寸变化等状态。使用方法如下：

const observer = new IntersectionObserver(
  (entries) => {
    if (entries[0].isIntersecting) {
      console.log("已滚动到底部");
    }
  },
  { threshold: 1 }
);

const element = document.getElementById("myDiv");

observer.observe(element);

以上代码创建了一个 IntersectionObserver 实例，监听 myDiv 元素是否与视口相交，如果 isIntersecting 属性为 true，则表示元素已经滚动到底部。需要注意的是，设置 threshold 为 1 表示元素完全进入视口时触发回调。

3. 使用 getBoundingClientRect 方法

getBoundingClientRect 方法可以获取元素的位置和尺寸信息，通过比较元素的底部坐标和视窗的底部坐标，可以得知是否滚动到底部。代码如下：

const element = document.getElementById("myDiv");
const rect = element.getBoundingClientRect();

function isBottomVisible() {
  return rect.bottom <= window.innerHeight;
}

window.addEventListener("scroll", function () {
  if (isBottomVisible()) {
    console.log("已滚动到底部");
  }
});

以上代码定义了一个 isBottomVisible 函数，每次滚动时判断元素的底部坐标是否小于或等于视窗的底部坐标，如果是，则表示滚动到底部。此外，需要监听 window 对象的 scroll 事件。

结语

以上是关于如何检测用户何时滚动到 div 的底部的三种常用方法，分别使用了 scroll 事件、Intersection Observer API 和 getBoundingClientRect 方法。其中，Intersection Observer API 是一种相对较新的技术，但更加灵活且性能更好，建议优先考虑使用。