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

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

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

当前回答

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

这段代码在Firefox和IE中也适用。

2019-08-13 07:37:33

其他回答

最简单的方法使用香草javascript

container.addEventListener('scroll', (e) => {
  var element = e.target;
  if (element.scrollHeight - element.scrollTop - element.clientHeight <= 0) {
    console.log('scrolled to bottom');
  }
});

2022-04-13 20:52:34

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

看到演示

2012-02-25 00:03:27

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

2014-03-14 01:38:53

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

所有主要浏览器支持的更新代码(包括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

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

推荐文章

最新文章

标签