Javascript：如何检测浏览器窗口是否滚动到底？

我需要检测用户是否滚动到页面底部。如果它们位于页面底部，当我向底部添加新内容时，我会自动将它们滚动到新底部。如果他们不在底部，他们正在阅读页面上更高的以前的内容，所以我不想自动滚动他们，因为他们想呆在原地

如何检测用户是否已滚动到页面底部，或者是否已在页面上滚动到更高的位置

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

---

我在寻找答案，但还没有找到确切的答案。下面是一个纯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);

//document.body.scrollTop应该单独完成这项工作，但实际上只有在使用Chrome时才起作用。
//在IE和Firefox中，它有时也会起作用（似乎在你拥有的非常简单的页面上）
//只有一个或类似的）但我不知道什么时候。这种方法似乎总是奏效。
var scrollTop=（document.documentElement&&document.documentElement.scrollTop）| document.body.scrollTop；
//Grodriguez对滚动高度的修正：
//考虑html/body设置为高度的情况：100%
var scrollHeight=（document.documentElement&&document.documentElement.scrollHeight）| document.body.scrollHeight；
//>=是必需的，因为如果水平滚动条可见，则window.innerHeight包括
//在这种情况下，等式的左边稍微大一些。
var scrolledtobotom=（scrollTop+window.innerHeight）>=scrollHeight；
//作为奖励：如何通过保持水平滚动位置以编程方式滚动到底部：
//因为window.innerHeight包括水平滚动条可见时的高度
//正确的垂直滚动顶部是
//scrollHeight窗口。innerHeight+sizeof（水平滚动条）
//因为我们不知道水平滚动条的可见性/大小
//我们滚动到scrollHeight，它超过了
//理想的scrollTop，但在所有浏览器中它似乎都会滚动到底
//即使水平滚动条可见，也不会出现问题。
var scrollLeft=（document.documentElement&&document.documentElement.scrollLeft）| document.body.scrollLeft；
scrollTo（scrollLeft，scrollHeight）；

我刚刚开始研究这个问题，这里的答案对我很有帮助，谢谢。 我对代码进行了一些扩展，这样代码就可以安全地返回到IE7：

希望这对某人有用

div{
高度：100px；
边框底部：1px实心#ddd；
}
分区：第n个孩子（偶数）{
背景：#CCC
}
分区：第n个孩子（奇数）{
背景：#FFF
}
console.log（“Doc Height=“+document.body.offsetHeight”）；
console.log（“win Height=“+document.documentElement.clientHeight”）；
window.onscroll=功能（ev）{
var docHeight=document.body.offsetHeight；
docHeight=docHeight==未定义？window.document.documentElement.scrollHeight:docHeight；
var winheight=window.innerHeight；
winheight=winheight==undefined？document.documentElement.clientHeight:winheight；
var scrollpoint=window.scrollY；
scrollpoint=scrollpoint==未定义？window.document.documentElement.scrollTop:scrollpoint；
如果（（滚动点+winheight）>=8）{
警惕（“你在底部”）；
}
};

如果在某个容器上设置

高度：100%

，则以下代码有效（在Chrome中测试）：

---

被接受的答案对我不起作用。这确实：

window.onscroll = function(evt) {
  var check = (Element.getBoundingClientRect().bottom - window.innerHeight <= 0) ? true : false;
  if (check) { console.log("You're at the bottom!"); }
};

---

如果您希望支持较旧的浏览器（IE9），请使用别名

window.pageYOffset

，它的支持稍好一些。

令人惊讶的是，没有一个解决方案适合我。我想这是因为我的

css

搞砸了，而且

body

在使用

height:100%

时没有把所有内容都包起来（还不知道为什么）。然而，在寻找解决方案时，我想出了一些好办法。。。基本上是一样的，但也许值得一看-我是编程新手，很抱歉，如果它做的同样慢，支持度低或类似的东西

$(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=函数（evt）{
var check=（Element.getBoundingClientRect（）.bottom-window.innerHeight更新了所有主要浏览器支持的代码（包括IE10和IE11）
当前接受答案的问题是，
window.scrollY
在IE中不可用

以下是关于scrollY的一段引述：

要实现跨浏览器兼容性，请使用window.pageYOffset而不是window.scrollY

和一个工作片段：


window.onscroll=函数（ev）{
如果（（window.innerHeight+window.pageYOffset）>=document.body.offsetHeight）{
警告（“你在页面底部”）；
}
}；
























































































































































































这个答案将修复边缘情况，这是因为
pageYOffset
是
double
，而
innerHeight
和
offsetHeight
是
长的
，所以当浏览器提供信息时，您可能会短一个像素。
例如：在页面的底部，我们有

true
window.innerHeight=10.2

true
window.pageYOffset=5.4

true

document.body.offsetHeight=15.6

我们的计算结果是： 10+5.4>=16，为假

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

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 + window.pageYOffset) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

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

window.onscroll = function() {

    // @var int totalPageHeight
    var totalPageHeight = document.body.scrollHeight; 

    // @var int scrollPoint
    var scrollPoint = window.scrollY + window.innerHeight;

    // check if we hit the bottom of the page
    if(scrollPoint >= totalPageHeight)
    {
        console.log("at the bottom");
    }
}

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()) {
    // doSomethingHere();
  }
});

JavascriptExecutor js = (JavascriptExecutor) driver;
boolean found = false;
long currOffset = 0;
long oldOffset = 0;
do
{
    oldOffset = currOffset;
    // LOOP to seek the component using several xpath regexes removed
    js.executeScript("window.scrollBy(0, 100)");
    currOffset = (Long)js.executeScript("var offset = window.window.pageYOffset; return offset;");
} while (!found && (currOffset != oldOffset));

const handleScroll = () => {
    if (Math.round(window.scrollY + window.innerHeight) >= Math.round(document.body.scrollHeight)) {
        onScroll();
    }
};

function atEnd() {
    var c = [document.scrollingElement.scrollHeight, document.body.scrollHeight, document.body.offsetHeight].sort(function(a,b){return b-a}) // select longest candidate for scrollable length
    return (window.innerHeight + window.scrollY + 2 >= c[0]) // compare with scroll position + some give
}
function scrolling() {
    if (atEnd()) 
        //do something
}
window.addEventListener('scroll', scrolling, {passive: true});