I need to detect if a user is scrolled to the bottom of a page. If they are at the bottom of the page, when I add new content to the bottom, I will automatically scroll them to the new bottom. If they are not at the bottom, they are reading previous content higher on the page, so I don't want to auto-scroll them since they want to stay where they are.
我需要检测用户是否滚动到页面底部。如果它们在页面的底部,当我向底部添加新内容时,我将自动将它们滚动到新的底部。如果它们不在页面底部,它们正在读取页面上更高的内容,所以我不希望自动滚动它们,因为它们希望保持在当前位置。
How can I detect if a user is scrolled to the bottom of the page or if they have scrolled higher on the page?
如何检测用户是否滚动到页面底部,或者用户是否在页面上滚动得更高?
11 个解决方案
#1
164
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
See demo
#2
62
Updated code for all major browsers support (include IE10 & IE11)
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
The problem with the current accepted answer is that window.scrollY
is not available in IE.
当前可接受答案的问题是窗口。IE中没有scrollY。
Here is a quote from mdn regarding scrollY:
以下是mdn对scrollY的引用:
For cross-browser compatibility, use window.pageYOffset instead of window.scrollY.
对于跨浏览器兼容性,请使用窗口。pageYOffset代替window.scrollY。
And a working snippet:
和工作代码片段:
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Note for mac
Based on @Raphaël's comment, there was a problem in mac due to a small offset.
The following updated condition works:
根据@Raphael的评论,mac有一个小的偏移。以下更新后的工作条件:
(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2
I didn't have the chance to test it further, if someone can comment about this specific issue it will be great.
我没有机会进一步测试它,如果有人可以评论这个特定的问题,它将是伟大的。
#3
30
The accepted answer did not work for me. This did:
公认的答案对我不起作用。这是:
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
// you're at the bottom of the page
console.log("Bottom of page");
}
};
#4
17
I was searching for an answer but haven't found an exact one. Here is a pure javascript solution that works with latest Firefox, IE and Chrome at the time of this answer:
我一直在寻找答案,但没有找到确切的答案。这是一个纯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);
#5
3
I've just started looking at this and the answers here helped me, so thanks for that. I've expanded a little so that the code is safe all the way back to IE7:
我刚开始看这个,这里的答案对我有帮助,谢谢。我已经扩展了一点,这样代码就可以安全地回到IE7:
Hope this proves useful for someone.
希望这对某人有用。
这里,有小提琴;)
<!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>
#6
3
If you're setting height: 100%
on some container <div id="wrapper">
, then the following code works (tested in Chrome):
如果设置高度:100%在某个容器
var wrapper = document.getElementById('wrapper');
wrapper.onscroll = function (evt) {
if (wrapper.scrollTop + window.innerHeight >= wrapper.scrollHeight) {
console.log('reached bottom!');
}
}
#7
2
You can look into jquery's infinite scroll:
您可以查看jquery的无限滚动:
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
Which sounds like it does what you're asking for, assuming you're willing to use the jquery library and not hoping for a strict pure JS method.
这听起来就像你所要求的那样,假设你愿意使用jquery库,而不希望使用严格的纯JS方法。
#8
2
This works
这是
window.onscroll = function() {
var scrollHeight, totalHeight;
scrollHeight = document.body.scrollHeight;
totalHeight = window.scrollY + window.innerHeight;
if(totalHeight >= scrollHeight)
{
console.log("at the bottom");
}
}
#9
1
Surprisingly none of the solutions worked for me. I think it's because my css
was messed up, and body
didn't wrap around all of the content when using height: 100%
(don't know why yet). However while looking for a solution I've came up with something well... basically the same, but maybe it's worth to look at - I'm new into programming so sorry if it's doing the same slower, is less supported or something like that...
令人惊讶的是,所有的解决方案对我都不起作用。我认为这是因为我的css搞砸了,而body在使用height: 100%(我还不知道为什么)时并没有涵盖所有内容。然而,在寻找解决方案的时候,我想到了一些很好的东西……基本上是一样的,但也许它值得一看——我对编程很陌生,抱歉如果它做的同样慢,支持较少或者类似的东西……
window.onscroll = function(evt) {
var check = (Element.getBoundingClientRect().bottom - window.innerHeight <= 0) ? true : false;
if (check) { console.log("You're at the bottom!"); }
};
#10
1
$(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");
}
}
#11
1
window.onscroll = function(ev) {
if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
This Answer will fix edge cases, this is because pageYOffset
is double
while innerHeight
and offsetHeight
are long
, so when the browser gives you the info, you may be a pixel short. For example: on bottom of the page we have
这个答案将修复边缘情况,这是因为pageYOffset是双倍的,而innerHeight和offsetHeight是长的,所以当浏览器给你信息时,你可能是一个像素的短。例如:在页面的底部
true window.innerHeight = 10.2
真正的窗口。innerHeight = 10.2
true window.pageYOffset = 5.4
真正的窗口。pageYOffset = 5.4
true document.body.offsetHeight = 15.6
真正的document.body。offsetHeight = 15.6
Our calculation then becomes: 10 + 5.4 >= 16 which is false
我们的计算是:10 + 5.4 >= 16,这是错误的
To fix this we can do Math.ceil
on the pageYOffset
value.
为了解决这个问题,我们可以做数学运算。在pageYOffset值上的ceil。
Hope that helps.
希望有帮助。
#1
164
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
See demo
#2
62
Updated code for all major browsers support (include IE10 & IE11)
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
The problem with the current accepted answer is that window.scrollY
is not available in IE.
当前可接受答案的问题是窗口。IE中没有scrollY。
Here is a quote from mdn regarding scrollY:
以下是mdn对scrollY的引用:
For cross-browser compatibility, use window.pageYOffset instead of window.scrollY.
对于跨浏览器兼容性,请使用窗口。pageYOffset代替window.scrollY。
And a working snippet:
和工作代码片段:
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Note for mac
Based on @Raphaël's comment, there was a problem in mac due to a small offset.
The following updated condition works:
根据@Raphael的评论,mac有一个小的偏移。以下更新后的工作条件:
(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2
I didn't have the chance to test it further, if someone can comment about this specific issue it will be great.
我没有机会进一步测试它,如果有人可以评论这个特定的问题,它将是伟大的。
#3
30
The accepted answer did not work for me. This did:
公认的答案对我不起作用。这是:
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
// you're at the bottom of the page
console.log("Bottom of page");
}
};
#4
17
I was searching for an answer but haven't found an exact one. Here is a pure javascript solution that works with latest Firefox, IE and Chrome at the time of this answer:
我一直在寻找答案,但没有找到确切的答案。这是一个纯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);
#5
3
I've just started looking at this and the answers here helped me, so thanks for that. I've expanded a little so that the code is safe all the way back to IE7:
我刚开始看这个,这里的答案对我有帮助,谢谢。我已经扩展了一点,这样代码就可以安全地回到IE7:
Hope this proves useful for someone.
希望这对某人有用。
这里,有小提琴;)
<!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>
#6
3
If you're setting height: 100%
on some container <div id="wrapper">
, then the following code works (tested in Chrome):
如果设置高度:100%在某个容器
var wrapper = document.getElementById('wrapper');
wrapper.onscroll = function (evt) {
if (wrapper.scrollTop + window.innerHeight >= wrapper.scrollHeight) {
console.log('reached bottom!');
}
}
#7
2
You can look into jquery's infinite scroll:
您可以查看jquery的无限滚动:
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
Which sounds like it does what you're asking for, assuming you're willing to use the jquery library and not hoping for a strict pure JS method.
这听起来就像你所要求的那样,假设你愿意使用jquery库,而不希望使用严格的纯JS方法。
#8
2
This works
这是
window.onscroll = function() {
var scrollHeight, totalHeight;
scrollHeight = document.body.scrollHeight;
totalHeight = window.scrollY + window.innerHeight;
if(totalHeight >= scrollHeight)
{
console.log("at the bottom");
}
}
#9
1
Surprisingly none of the solutions worked for me. I think it's because my css
was messed up, and body
didn't wrap around all of the content when using height: 100%
(don't know why yet). However while looking for a solution I've came up with something well... basically the same, but maybe it's worth to look at - I'm new into programming so sorry if it's doing the same slower, is less supported or something like that...
令人惊讶的是,所有的解决方案对我都不起作用。我认为这是因为我的css搞砸了,而body在使用height: 100%(我还不知道为什么)时并没有涵盖所有内容。然而,在寻找解决方案的时候,我想到了一些很好的东西……基本上是一样的,但也许它值得一看——我对编程很陌生,抱歉如果它做的同样慢,支持较少或者类似的东西……
window.onscroll = function(evt) {
var check = (Element.getBoundingClientRect().bottom - window.innerHeight <= 0) ? true : false;
if (check) { console.log("You're at the bottom!"); }
};
#10
1
$(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");
}
}
#11
1
window.onscroll = function(ev) {
if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
This Answer will fix edge cases, this is because pageYOffset
is double
while innerHeight
and offsetHeight
are long
, so when the browser gives you the info, you may be a pixel short. For example: on bottom of the page we have
这个答案将修复边缘情况,这是因为pageYOffset是双倍的,而innerHeight和offsetHeight是长的,所以当浏览器给你信息时,你可能是一个像素的短。例如:在页面的底部
true window.innerHeight = 10.2
真正的窗口。innerHeight = 10.2
true window.pageYOffset = 5.4
真正的窗口。pageYOffset = 5.4
true document.body.offsetHeight = 15.6
真正的document.body。offsetHeight = 15.6
Our calculation then becomes: 10 + 5.4 >= 16 which is false
我们的计算是:10 + 5.4 >= 16,这是错误的
To fix this we can do Math.ceil
on the pageYOffset
value.
为了解决这个问题,我们可以做数学运算。在pageYOffset值上的ceil。
Hope that helps.
希望有帮助。