我正在制作一个分页系统(有点像Facebook),当用户滚动到底部时,内容就会加载。我认为最好的方法是找到用户在页面底部的时间,然后运行Ajax查询来加载更多的帖子。
唯一的问题是我不知道如何检查用户是否已经滚动到页面的底部。什么好主意吗?
我使用jQuery,所以请随意提供使用它的答案。
我正在制作一个分页系统(有点像Facebook),当用户滚动到底部时,内容就会加载。我认为最好的方法是找到用户在页面底部的时间,然后运行Ajax查询来加载更多的帖子。
唯一的问题是我不知道如何检查用户是否已经滚动到页面的底部。什么好主意吗?
我使用jQuery,所以请随意提供使用它的答案。
当前回答
根据Nick Craver的回答,你可以限制滚动事件,这样它就不会频繁地触发,从而提高浏览器性能:
var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);
$document.ready(function () {
$window
.off('scroll', ScrollHandler)
.on('scroll', ScrollHandler);
});
function ScrollHandler(e) {
//throttle event:
clearTimeout(_throttleTimer);
_throttleTimer = setTimeout(function () {
console.log('scroll');
//do work
if ($window.scrollTop() + $window.height() > $document.height() - 100) {
alert("near bottom!");
}
}, _throttleDelay);
}
其他回答
如果你调用$(window).height() Chrome会给出页面的全部高度
相反,使用window。innerHeight来检索窗口的高度。 必要的检查应包括:
if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
console.log("reached bottom!");
}
在window上使用.scroll()事件,如下所示:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
你可以在这里测试它,这取窗口的顶部滚动,所以它向下滚动了多少,添加可见窗口的高度,并检查它是否等于整体内容(文档)的高度。如果你想检查用户是否在底部附近,它看起来像这样:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});
你可以在这里测试这个版本,只要调整100到你想要触发的底部像素。
显然,对我有用的是“身体”,而不是像这样的“窗口”:
$('body').scroll(function() {
if($('body').scrollTop() + $('body').height() == $(document).height()) {
//alert at buttom
}
});
为了实现跨浏览器兼容性:
function getheight(){
var doc = document;
return Math.max(
doc.body.scrollHeight, doc.documentElement.scrollHeight,
doc.body.offsetHeight, doc.documentElement.offsetHeight,
doc.body.clientHeight, doc.documentElement.clientHeight
);
}
然后调用函数getheight()而不是$(document).height()
$('body').scroll(function() {
if($('body').scrollTop() + $('body').height() == getheight() ) {
//alert at bottom
}
});
接近底部使用:
$('body').scroll(function() {
if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
//alert near bottom
}
});
根据Nick Craver的回答,你可以限制滚动事件,这样它就不会频繁地触发,从而提高浏览器性能:
var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);
$document.ready(function () {
$window
.off('scroll', ScrollHandler)
.on('scroll', ScrollHandler);
});
function ScrollHandler(e) {
//throttle event:
clearTimeout(_throttleTimer);
_throttleTimer = setTimeout(function () {
console.log('scroll');
//do work
if ($window.scrollTop() + $window.height() > $document.height() - 100) {
alert("near bottom!");
}
}, _throttleDelay);
}
下面是最简单的方法:
const handleScroll = () => {
if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
console.log('scrolled to the bottom')
}}
window.addEventListener('scroll', handleScroll)