我正在制作一个分页系统(有点像Facebook),当用户滚动到底部时,内容就会加载。我认为最好的方法是找到用户在页面底部的时间,然后运行Ajax查询来加载更多的帖子。
唯一的问题是我不知道如何检查用户是否已经滚动到页面的底部。什么好主意吗?
我使用jQuery,所以请随意提供使用它的答案。
我正在制作一个分页系统(有点像Facebook),当用户滚动到底部时,内容就会加载。我认为最好的方法是找到用户在页面底部的时间,然后运行Ajax查询来加载更多的帖子。
唯一的问题是我不知道如何检查用户是否已经滚动到页面的底部。什么好主意吗?
我使用jQuery,所以请随意提供使用它的答案。
当前回答
这里有一个相当简单的方法
const didScrollToBottom =榆树。滚动顶部+榆树。clientHeight == elm.scrollHeight
例子
elm.onscroll = function() {
if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
// User has scrolled to the bottom of the element
}
}
其中elm是从i.e. document.getElementById中检索的元素。
其他回答
所有这些解决方案在Firefox和Chrome上都不适用,所以我使用Miles O'Keefe和meder omuraliev的自定义函数:
function getDocHeight()
{
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
function getWindowSize()
{
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [myWidth, myHeight];
}
$(window).scroll(function()
{
if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
{
alert("bottom!");
}
});
下面是最简单的方法:
const handleScroll = () => {
if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
console.log('scrolled to the bottom')
}}
window.addEventListener('scroll', handleScroll)
请检查这个答案
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
console.log("bottom");
}
};
你可以执行footerHeight - document.body.offsetHeight来查看你是否接近页脚或到达页脚
Nick Craver的回答很好,避免了$(document).height()的值因浏览器而异的问题。
为了让它在所有浏览器上都能工作,使用James Padolsey的这个函数:
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
代替$(document).height(),这样最终的代码是:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
alert("bottom!");
}
});
显然,对我有用的是“身体”,而不是像这样的“窗口”:
$('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
}
});