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

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


当前回答

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

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有更好的支持。

其他回答

新的解决方案。

一个问题是缺少标准的主滚动元素。最近实施的文件。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});

使用defaultView和documentElement嵌入功能代码片段:

const {defaultView} =文档; const {documentElement} =文档; const handler = evt => (() => { const hitBottom = (() => (defaultView.)innerHeight + defaultView.pageYOffset) >= documentElement.offsetHeight)(); hitBottom ? console.log(“是的”) : console.log(“不”) }); 文档。addEventListener(“滚动”,处理程序); <pre style="height:110vh;background-color:fuchsia">向下滚动</pre>

我只是在我的页面底部放置了一个小图像,加载="lazy",这样当用户向下滚动时,浏览器才会加载它。然后图像触发一个php计数器脚本,返回一个真实的图像

 <img loading="lazy" src="zaehler_seitenende.php?rand=<?=rand(1,1000);?>">

 <?php
 @header("Location: https://domain.de/4trpx.gif");

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

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

我必须想出一种方法(在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));

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