我需要检测用户是否滚动到页面底部。如果它们在页面的底部，当我在底部添加新内容时，我会自动将它们滚动到新的底部。如果他们不在底部，他们正在阅读页面上更高的先前内容，所以我不想自动滚动他们，因为他们想呆在那里。
我如何检测用户是否滚动到页面的底部，或者他们是否在页面上滚动得更高?
当前回答
如果你喜欢jquery
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
// doSomethingHere();
}
});
其他回答
我发现有两种方法对我很有效:
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')
}
})
如上所述，代码可能无法在所有设备和浏览器上运行。下面是经过测试的工作代码，将兼容所有主要设备(iPhone, Android, PC)在所有浏览器(Chrome, IE, Edge, Firefox和Safari)。
window.onscroll = function(ev) { var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight ); if ((window.innerHeight + window.scrollY) >= pageHeight) { console.log("You are at the bottom of the page."); } }; <html> <body> <div style="width:100%; height:1500px"> <p>Keep scrolling the page till end...</p> </div> </body> </html>
如果你在一些容器上设置高度: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!');
}
}
新的解决方案。
一个问题是缺少标准的主滚动元素。最近实施的文件。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});
$(document).ready(function(){
$('.NameOfYourDiv').on('scroll',chk_scroll);
});
function chk_scroll(e)
{
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
{
alert("scrolled to the bottom");
}
}
