如何检测浏览器窗口是否滚动到底部?更新了所有主流浏览器支持的代码(包括IE10和IE11)

2022-08-30 00:35:48

我需要检测用户是否滚动到页面底部。如果它们位于页面底部,当我向底部添加新内容时,我会自动将它们滚动到新底部。如果他们不在底部,他们正在阅读页面上更高的先前内容,所以我不想自动滚动他们,因为他们想留在原地。

如何检测用户是否滚动到页面底部,或者他们是否在页面上滚动得更高?


答案 1
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

观看演示


答案 2

更新了所有主流浏览器支持的代码(包括IE10和IE11)

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

当前接受的答案的问题是在IE中不可用。window.scrollY

以下是mdn关于scrollY的引用:

为了跨浏览器兼容,请使用 window.pageYOffset 而不是 window.scrollY。

和一个工作片段:

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

适用于 Mac 的注意事项

根据@Raphaël的评论,由于偏移量很小,mac中存在问题。
以下更新的条件有效:

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

我没有机会进一步测试它,如果有人可以对此特定问题发表评论,那就太好了。