我需要检测用户是否滚动到页面底部。如果它们在页面底部，当我向底部添加新内容时，我会自动将它们滚动到新底部。如果它们不在底部，则它们正在阅读页面上更高的先前内容，因此我不想自动滚动它们，因为它们想留在原处。
如何检测用户是否已滚动到页面底部，或者他们是否已在页面上滚动到更高位置？
如何检测浏览器窗口是否滚动到底部？
IT技术
javascript
2021-02-06 16:59:31
6个回答
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
看演示
所有主要浏览器支持的更新代码（包括 IE10 和 IE11）
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
当前接受的答案的问题是window.scrollY在 IE 中不可用。
这是来自mdn 的关于 scrollY的引用：
为了跨浏览器兼容性，请使用 window.pageYOffset 而不是 window.scrollY。
和一个工作片段：
mac注意事项
根据@Raphaël 的评论，由于小偏移，mac 中存在问题。
以下更新条件有效：
(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2
我没有机会进一步测试它，如果有人可以对这个特定问题发表评论，那就太好了。
接受的答案对我不起作用。这做到了：
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
// you're at the bottom of the page
console.log("Bottom of page");
}
};
如果您希望支持旧浏览器 (IE9)，请使用window.pageYOffset支持稍好一点的别名。
我正在寻找答案，但还没有找到确切的答案。这是一个纯 javascript 解决方案，在此回答时适用于最新的 Firefox、IE 和 Chrome：
// document.body.scrollTop alone should do the job but that actually works only in case of Chrome.
// With IE and Firefox it also works sometimes (seemingly with very simple pages where you have
// only a <pre> or something like that) but I don't know when. This hack seems to work always.
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
// Grodriguez's fix for scrollHeight:
// accounting for cases where html/body are set to height:100%
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
// >= is needed because if the horizontal scrollbar is visible then window.innerHeight includes
// it and in that case the left side of the equation is somewhat greater.
var scrolledToBottom = (scrollTop + window.innerHeight) >= scrollHeight;
// As a bonus: how to scroll to the bottom programmatically by keeping the horizontal scrollpos:
// Since window.innerHeight includes the height of the horizontal scrollbar when it is visible
// the correct vertical scrollTop would be
// scrollHeight-window.innerHeight+sizeof(horizontal_scrollbar)
// Since we don't know the visibility/size of the horizontal scrollbar
// we scroll to scrollHeight that exceeds the value of the
// desired scrollTop but it seems to scroll to the bottom with all browsers
// without problems even when the horizontal scrollbar is visible.
var scrollLeft = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
window.scrollTo(scrollLeft, scrollHeight);
这有效
window.onscroll = function() {
// @var int totalPageHeight
var totalPageHeight = document.body.scrollHeight;
// @var int scrollPoint
var scrollPoint = window.scrollY + window.innerHeight;
// check if we hit the bottom of the page
if(scrollPoint >= totalPageHeight)
{
console.log("at the bottom");
}
}
如果您希望支持旧浏览器 (IE9)，请将window.scrollY替换为window.pageYOffset