如何检测浏览器窗口是否滚动到底部?更新了所有主流浏览器支持的代码(包括IE10和IE11)
2022-08-30 00:35:48
我需要检测用户是否滚动到页面底部。如果它们位于页面底部,当我向底部添加新内容时,我会自动将它们滚动到新底部。如果他们不在底部,他们正在阅读页面上更高的先前内容,所以我不想自动滚动他们,因为他们想留在原地。
如何检测用户是否滚动到页面底部,或者他们是否在页面上滚动得更高?
我需要检测用户是否滚动到页面底部。如果它们位于页面底部,当我向底部添加新内容时,我会自动将它们滚动到新底部。如果他们不在底部,他们正在阅读页面上更高的先前内容,所以我不想自动滚动他们,因为他们想留在原地。
如何检测用户是否滚动到页面底部,或者他们是否在页面上滚动得更高?
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
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>
根据@Raphaël的评论,由于偏移量很小,mac中存在问题。
以下更新的条件有效:
(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2
我没有机会进一步测试它,如果有人可以对此特定问题发表评论,那就太好了。