Javascript:如何检测浏览器窗口是否滚动到底部?

我需要检测用户是否滚动到页面的底部。 如果他们在页面的底部,当我添加新的内容到底部,我会自动滚动到新的底部。 如果他们不在底部,他们正在读取页面上更高的内容,所以我不想自动滚动他们,因为他们想留在原地。

如何检测用户是滚动到页面底部还是滚动到页面上?

window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { // you're at the bottom of the page } }; 

看演示

支持所有主stream浏览器的更新代码(包括IE10和IE11)

 window.onscroll = function(ev) { if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) { alert("you're at the bottom of the page"); } }; 

目前接受的答案是window.scrollY在IE中不可用。

这里是关于scrollY的mdn引用:

为了跨浏览器兼容性,请使用window.pageYOffset而不是window.scrollY。

和一个工作片段:

 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> 

接受的答案不适合我。 这样做:

 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"); } }; 

我正在寻找答案,但没有find确切的答案。 这是一个纯粹的JavaScript解决scheme,可以与最新的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); 

你可以看看jQuery的无限滚动:

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

这听起来像是你所要求的,假设你愿意使用jquery库,而不是希望有一个严格的纯JS方法。

我刚开始看这个,这里的答案帮助了我,所以谢谢你。 我已经扩展了一点,以便代码可以安全地返回到IE7:

希望这certificate对某人有用。

在这里,有一个小提琴;)

  <!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> 

如果您在某个容器<div id="wrapper">上设置了height: 100% ,则以下代码可以正常工作(在Chrome中进行testing):

 var wrapper = document.getElementById('wrapper'); wrapper.onscroll = function (evt) { if (wrapper.scrollTop + window.innerHeight >= wrapper.scrollHeight) { console.log('reached bottom!'); } } 

令人惊讶的是没有解决scheme为我工作。 我认为这是因为我的css是搞砸了, body并没有包裹所有的内容时使用height: 100% (不知道为什么呢)。 然而,在寻找解决scheme时,我想到了一些很好的东西…基本上是一样的,但也许值得一看 – 我是新编程的,所以如果速度慢,支持不足或类似那…

 window.onscroll = function(evt) { var check = (Element.getBoundingClientRect().bottom - window.innerHeight <= 0) ? true : false; if (check) { console.log("You're at the bottom!"); } }; 
 $(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"); } } 
 window.onscroll = function(ev) { if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) { alert("you're at the bottom of the page"); } }; 

这个答案将修复边缘情况,这是因为pageYOffsetdoubleinnerHeightoffsetHeightlong ,所以当浏览器给你的信息,你可能是一个像素短。 例如:在我们页面的底部

真正的 window.innerHeight = 10.2

true window.pageYOffset = 5.4

true document.body.offsetHeight = 15.6

我们的计算结果是:10 + 5.4> = 16这是错误的

要解决这个问题,我们可以在pageYOffset值上做pageYOffset

希望有所帮助。

这工作

 window.onscroll = function() { var scrollHeight, totalHeight; scrollHeight = document.body.scrollHeight; totalHeight = window.scrollY + window.innerHeight; if(totalHeight >= scrollHeight) { console.log("at the bottom"); } }