Question

很难检测到文档底部。尝试以下代码：

let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight

然后如果它是true，我就触发了自定义函数。但这不是真的，因为它不可能100％相等，因为：

console.log(document.documentElement.scrollTop + window.innerHeight + ' and document height is ' + document.documentElement.offsetHeight)

通常会给出以下结果：“ 3197.199951171875，文档高度为3198”，并且您可以看到它不相等，因此我的函数将不会触发。 Math.round()对我的情况没有帮助。有什么建议吗？

Answer 1

您可以像这样检测文档是否滚动到底部：

if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
    //at the bottom of the page
}

演示：

window.addEventListener('scroll', function(event) {
    if(window.pageYOffset==0){
      alert('At the top of the page');
    }
    if ((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight) {
        alert("At the bottom of the page.");
    }
});

html, body{
  height: 3000px;
}

在Mac上，存在一个较小的偏移量（大约1像素）的问题，因此我们可以修改检查以从主体的offsetHeight中减去2。

if(window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 2){
//at the bottom of the page
}

Answer 2

更改比较：

let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight > document.documentElement.offsetHeight -1;

使用JS检测文档滚动的底部

2 个答案: