Question

我正在尝试确定何时滚动到页面底部（不使用任何JS库），但到目前为止，我对使用以下哪一项感到困惑。我见过的最有希望的是window.scrollY，但即使滚动到页面底部，它也永远不会匹配window.innerHeight的值。最好的方法是什么？

window.innerWidth
window.innerHeight

window.outerWidth
window.outerHeight

window.scrollX
window.scrollY

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollTop
document.body.scrollLeft

document.body.offsetTop
document.body.offsetLeft
document.body.offsetWidth
document.body.offsetHeight

Answer 1

当window.innerHeight + document.body.scrollTop大于或等于document.body.offsetHeight时，您就在底部

但由于IE存在这些属性的问题，因此您需要使用其他属性，例如

滚动时为

document.documentElement.scrollTop，窗口高度为document.documentElement.clientHeight

完整代码：http://jsbin.com/egegu3/6/edit

Answer 2

作为一个懒惰的人，我会将一个元素放在DIV的最底层，并在其上应用“element in view”jQuery插件。（免责声明：我没有经验，但看起来不错。）

博客条目中的示例稍有不同：

$('#bottomDIV').bind('inview', function (event, visible) {
  if (visible == true) {
    // element is now visible in the viewport
    highlightButtons(); // or whatever you want to do in the context
  }
});

Answer 3

这很好用：

 window.onscroll = function()
 {
    var scrollHeight, totalHeight;
    scrollHeight = document.body.scrollHeight;
    totalHeight = window.scrollY + window.innerHeight;

    if(totalHeight >= scrollHeight)
    {
        console.log("at the bottom");
    }
}

使用Javascript确定何时滚动到页面底部

3 个答案: