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

javascript

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

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