如果有人想要一个香草的JavaScript解决方案，需要检测当用户滚动到<div>的底部时，我设法通过使用这些代码行实现它

window.addEventListener("scroll", () => {
    var offset = element.getBoundingClientRect().top - element.offsetParent.getBoundingClientRect().top;
    const top = window.pageYOffset + window.innerHeight - offset;

    if (top === element.scrollHeight) {
        console.log("bottom");
    }
}, { passive: false });

(2021) 这里的很多答案都涉及到一个元素的引用，但如果你只关心整个页面，只需使用:

function isBottom() {
  const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
  const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
  return distanceFromBottom < 20; // adjust the number 20 yourself
}

下面是一个使用es6和debounce的JavaScript解决方案:

document.addEventListener('scroll', debounce(() => {
  if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
    // Do something
  }
}, 500))

function debounce(e,t=300){let u;return(...i)=>{clearTimeout(u),u=setTimeout(()=>{e.apply(this,i)},t)}}

演示:https://jsbin.com/jicikaruta/1/edit?js,输出

引用:

scrollHeight pageYOffset innerHeight 防反跳

在window上使用.scroll()事件，如下所示:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

你可以在这里测试它，这取窗口的顶部滚动，所以它向下滚动了多少，添加可见窗口的高度，并检查它是否等于整体内容(文档)的高度。如果你想检查用户是否在底部附近，它看起来像这样:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

你可以在这里测试这个版本，只要调整100到你想要触发的底部像素。

这里有一个相当简单的方法

const didScrollToBottom =榆树。滚动顶部+榆树。clientHeight == elm.scrollHeight

例子

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}

其中elm是从i.e. document.getElementById中检索的元素。

这是我的意见，因为公认的答案对我不起作用。

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;