我需要检测用户是否滚动到页面底部。如果它们在页面的底部，当我在底部添加新内容时，我会自动将它们滚动到新的底部。如果他们不在底部，他们正在阅读页面上更高的先前内容，所以我不想自动滚动他们，因为他们想呆在那里。
我如何检测用户是否滚动到页面的底部，或者他们是否在页面上滚动得更高?
当前回答
最简单的方法使用香草javascript
container.addEventListener('scroll', (e) => {
var element = e.target;
if (element.scrollHeight - element.scrollTop - element.clientHeight <= 0) {
console.log('scrolled to bottom');
}
});
其他回答
如果你在一些容器上设置高度:100% <div id="wrapper">，那么下面的代码工作(在Chrome中测试):
var wrapper = document.getElementById('wrapper');
wrapper.onscroll = function (evt) {
if (wrapper.scrollTop + window.innerHeight >= wrapper.scrollHeight) {
console.log('reached bottom!');
}
}
我刚刚开始看这个，这里的答案帮助了我，所以谢谢你。 我稍微扩展了一下，这样代码就可以安全地回到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>
如果你用其他方法都不走运，试试这个方法。
窗口。Onscroll = function() { const difference = document.documentElement.scrollHeight - window.innerHeight; const scrollposition = document.documentElement.scrollTop; If (difference - scrollposition <= 2) { alert(“页底!”); ｝ ｝
我为移动设备和桌面尝试了这个功能，这对我来说是工作，这里的一些评论在移动/Android设备上不起作用，顺便说一句，谢谢你的问题。程序员们，坚持下去吧!
window.addEventListener("scroll", function(el) {
const scrollY = window.scrollY + window.innerHeight + 2;
const bodyScroll = document.body.offsetHeight;
console.log("Scroll Y : " + scrollY);
console.log("Body : " + bodyScroll);
if(scrollY >= bodyScroll){
alert("Bottom Page");
}
})
新的解决方案。
一个问题是缺少标准的主滚动元素。最近实施的文件。scrollingElement可以用来尝试克服这个问题。下面是一个跨浏览器的解决方案。
function atEnd() {
var c = [document.scrollingElement.scrollHeight, document.body.scrollHeight, document.body.offsetHeight].sort(function(a,b){return b-a}) // select longest candidate for scrollable length
return (window.innerHeight + window.scrollY + 2 >= c[0]) // compare with scroll position + some give
}
function scrolling() {
if (atEnd())
//do something
}
window.addEventListener('scroll', scrolling, {passive: true});
