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

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

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

当前回答

这是

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

如果您正在寻找支持旧浏览器(IE9)的替换窗口。使用window.pageYOffset进行滚动

2017-10-12 20:36:14

其他回答

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

我必须想出一种方法(在Java中)，系统地向下滚动，寻找我不知道正确XPath的组件(说来话长，所以就随它去吧)。正如我刚才所说，在寻找组件时需要向下滚动，并在找到组件或到达页面底部时停止滚动。

下面的代码片段控制向下滚动到页面底部:

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

顺便说一下，在执行此代码片段之前，窗口会最大化。

2019-01-11 22:57:58

我发现有两种方法对我很有效:

  window.addEventListener('scroll', function(e) {
    if (
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight
    ) {
      console.log('You are at the bottom')
    }
  })

另一个是:

  window.addEventListener('scroll', function(e) {
    if (
      window.innerHeight + window.pageYOffset ===
      document.documentElement.offsetHeight
    ) {
      console.log('You are at the bottom')
    }
  })

2020-07-08 23:40:25

你可以使用我们的NPM包 (它的完美滚动条，但我们做了一些调试) 链接: https://www.npmjs.com/package/@nima2142/vue2-perfect-scrollbar

<perfect-scrollbar @ps-y-reach-end="myFunction">
  <!-- your code-->
</perfect-scrollbar>

2023-02-06 09:14:15

令人惊讶的是，没有一个解决方案对我有效。我认为这是因为我的css是混乱的，和身体没有围绕所有的内容使用高度:100%(不知道为什么)。然而，在寻找解决方案时，我想到了一些东西……基本上是一样的，但也许值得一看——我是编程新手，所以抱歉，如果它做同样的事情更慢，支持更少或类似的事情……

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

2015-12-24 01:18:45

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

推荐文章

最新文章

标签