令人惊讶的是，没有一个解决方案对我有效。我认为这是因为我的css是混乱的，和身体没有围绕所有的内容使用高度:100%(不知道为什么)。然而，在寻找解决方案时，我想到了一些东西……基本上是一样的，但也许值得一看——我是编程新手，所以抱歉，如果它做同样的事情更慢，支持更少或类似的事情……

window.onscroll = function(evt) {
  var check = (Element.getBoundingClientRect().bottom - window.innerHeight) <= 0;
  
  if (check) { console.log("You're at the bottom!"); }
};

我发现有两种方法对我很有效:

  window.addEventListener('scroll', function(e) {
    if (
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight
    ) {
      console.log('You are at the bottom')
    }
  })

另一个是:

  window.addEventListener('scroll', function(e) {
    if (
      window.innerHeight + window.pageYOffset ===
      document.documentElement.offsetHeight
    ) {
      console.log('You are at the bottom')
    }
  })

新的解决方案。

一个问题是缺少标准的主滚动元素。最近实施的文件。scrollingElement可以用来尝试克服这个问题。下面是一个跨浏览器的解决方案。

function atEnd() {
    var c = [document.scrollingElement.scrollHeight, document.body.scrollHeight, document.body.offsetHeight].sort(function(a,b){return b-a}) // select longest candidate for scrollable length
    return (window.innerHeight + window.scrollY + 2 >= c[0]) // compare with scroll position + some give
}
function scrolling() {
    if (atEnd()) 
        //do something
}
window.addEventListener('scroll', scrolling, {passive: true});

你可以使用我们的NPM包 (它的完美滚动条，但我们做了一些调试) 链接: https://www.npmjs.com/package/@nima2142/vue2-perfect-scrollbar

<perfect-scrollbar @ps-y-reach-end="myFunction">
  <!-- your code-->
</perfect-scrollbar>

这是

window.onscroll = function() {

    // @var int totalPageHeight
    var totalPageHeight = document.body.scrollHeight; 

    // @var int scrollPoint
    var scrollPoint = window.scrollY + window.innerHeight;

    // check if we hit the bottom of the page
    if(scrollPoint >= totalPageHeight)
    {
        console.log("at the bottom");
    }
}

如果您正在寻找支持旧浏览器(IE9)的替换窗口。使用window.pageYOffset进行滚动

window.onscroll = function(ev) {
    if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

这个答案将修复边缘情况，这是因为pageYOffset是double，而innerHeight和offsetHeight是长，所以当浏览器给你的信息，你可能是一个像素短。 例如:在这一页的底部

真正的窗口。innerHeight = 10.2

真正的窗口。pageYOffset = 5.4

true document.body.offsetHeight = 15.6

我们的计算结果是: 10 + 5.4 >= 16，是错误的

要解决这个问题，我们可以用数学。pageYOffset值上的ceil。

希望这能有所帮助。