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"); } };
这个答案将修复边缘情况，这是因为pageYOffset是double而innerHeight和offsetHeight是long ，所以当浏览器给你的信息，你可能是一个像素短。 例如：在我们页面的底部
真正的 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"); } }
