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

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

我如何检测用户是否滚动到页面的底部，或者他们是否在页面上滚动得更高?

当前回答

公认的答案对我不起作用。这是:

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

如果您希望支持旧的浏览器(IE9)，请使用别名窗口。pageYOffset有更好的支持。

2015-07-07 09:01:48

其他回答

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是长，所以当浏览器给你的信息，你可能是一个像素短。例如:在这一页的底部

真正的窗口。innerHeight = 10.2

真正的窗口。pageYOffset = 5.4

true document.body.offsetHeight = 15.6

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

要解决这个问题，我们可以用数学。pageYOffset值上的ceil。

希望这能有所帮助。

2017-06-07 20:46:36

我为移动设备和桌面尝试了这个功能，这对我来说是工作，这里的一些评论在移动/Android设备上不起作用，顺便说一句，谢谢你的问题。程序员们，坚持下去吧!

    window.addEventListener("scroll", function(el) {
    const scrollY = window.scrollY + window.innerHeight + 2;
    const bodyScroll = document.body.offsetHeight;

    console.log("Scroll Y : " + scrollY);
    console.log("Body : " + bodyScroll);

    if(scrollY >= bodyScroll){
      alert("Bottom Page");
    }
  })

2022-08-04 14:53:21

您可以检查窗口的高度和滚动顶部的组合结果是否大于主体的结果

如果窗口。innerHeight +窗口。scroll> = document.body.scrollHeight) {}

2020-02-27 16:32:38

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

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

目前公认答案的问题在于这个窗口。scrollY在IE中不可用。

以下是mdn关于scrollY的引用:

为了跨浏览器兼容，请使用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"); } };

mac注意事项

根据@Raphaël的评论，由于一个小偏移，mac出现了一个问题。更新后的条件如下:

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

我没有机会进一步测试，如果有人能评论这个具体问题，那就太好了。

2016-11-02 00:55:33

新的解决方案。

一个问题是缺少标准的主滚动元素。最近实施的文件。scrollingElement可以用来尝试克服这个问题。下面是一个跨浏览器的解决方案。

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

2021-05-18 08:35:51

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

推荐文章

最新文章

标签