我需要检测用户是否滚动到页面底部。如果它们在页面的底部，当我在底部添加新内容时，我会自动将它们滚动到新的底部。如果他们不在底部，他们正在阅读页面上更高的先前内容，所以我不想自动滚动他们，因为他们想呆在那里。
我如何检测用户是否滚动到页面的底部，或者他们是否在页面上滚动得更高?
当前回答
最简单的方法使用香草javascript
container.addEventListener('scroll', (e) => {
var element = e.target;
if (element.scrollHeight - element.scrollTop - element.clientHeight <= 0) {
console.log('scrolled to bottom');
}
});
其他回答
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
看到演示
我发现有两种方法对我很有效:
window.addEventListener('scroll', function(e) {
if (
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight
) {
console.log('You are at the bottom')
}
})
另一个是:
window.addEventListener('scroll', function(e) {
if (
window.innerHeight + window.pageYOffset ===
document.documentElement.offsetHeight
) {
console.log('You are at the bottom')
}
})
我一直在寻找答案，但还没有找到确切的答案。这是一个纯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(ev) {
if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
这个答案将修复边缘情况，这是因为pageYOffset是double，而innerHeight和offsetHeight是长，所以当浏览器给你的信息，你可能是一个像素短。 例如:在这一页的底部
真正的窗口。innerHeight = 10.2
真正的窗口。pageYOffset = 5.4
true document.body.offsetHeight = 15.6
我们的计算结果是: 10 + 5.4 >= 16，是错误的
要解决这个问题，我们可以用数学。pageYOffset值上的ceil。
希望这能有所帮助。
我刚刚开始看这个，这里的答案帮助了我，所以谢谢你。 我稍微扩展了一下，这样代码就可以安全地回到IE7:
希望这对某些人有用。
来，来一把小提琴吧。
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
border-bottom: 1px solid #ddd;
}
div:nth-child(even) {
background: #CCC
}
div:nth-child(odd) {
background: #FFF
}
</style>
</head>
<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>
<script type="text/javascript">
console.log("Doc Height = " + document.body.offsetHeight);
console.log("win Height = " + document.documentElement.clientHeight);
window.onscroll = function (ev) {
var docHeight = document.body.offsetHeight;
docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
var winheight = window.innerHeight;
winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
var scrollpoint = window.scrollY;
scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
if ((scrollpoint + winheight) >= docHeight) {
alert("you're at the bottom");
}
};
</script>
</html>
