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

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

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

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

我刚刚开始看这个，这里的答案帮助了我，所以谢谢你。我稍微扩展了一下，这样代码就可以安全地回到IE7:

希望这对某些人有用。

来，来一把小提琴吧。

    <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 100px;
            border-bottom: 1px solid #ddd;
        }

        div:nth-child(even) {
            background: #CCC
        }

        div:nth-child(odd) {
            background: #FFF
        }

    </style>
</head>

<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>

<script type="text/javascript">
console.log("Doc Height = " + document.body.offsetHeight);
console.log("win Height = " + document.documentElement.clientHeight);
window.onscroll = function (ev) {
    var docHeight = document.body.offsetHeight;
    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;

    var winheight = window.innerHeight;
    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;

    var scrollpoint = window.scrollY;
    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;

    if ((scrollpoint + winheight) >= docHeight) {
        alert("you're at the bottom");
    }
};
</script>
</html>

2014-11-07 16:51:39

如果你在一些容器上设置高度:100% <div id="wrapper">，那么下面的代码工作(在Chrome中测试):

var wrapper = document.getElementById('wrapper');

wrapper.onscroll = function (evt) {
  if (wrapper.scrollTop + window.innerHeight >= wrapper.scrollHeight) {
    console.log('reached bottom!');
  }
}

2015-03-29 20:00:33

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

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

令人惊讶的是，没有一个解决方案对我有效。我认为这是因为我的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

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

}

2016-09-14 16:41:46

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

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

这是

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

如果你喜欢jquery

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

2018-10-19 17:15:17

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

使用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>

2019-02-01 11:12:35

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

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

2019-08-13 07:37:33

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

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

2020-02-27 16:32:38

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

  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

如果你用其他方法都不走运，试试这个方法。

窗口。Onscroll = function() { const difference = document.documentElement.scrollHeight - window.innerHeight; const scrollposition = document.documentElement.scrollTop; If (difference - scrollposition <= 2) { alert(“页底!”); ｝｝

2020-11-20 01:43:51

新的解决方案。

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

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

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

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

2022-01-19 20:31:50

如上所述，代码可能无法在所有设备和浏览器上运行。下面是经过测试的工作代码，将兼容所有主要设备(iPhone, Android, PC)在所有浏览器(Chrome, IE, Edge, Firefox和Safari)。

window.onscroll = function(ev) { var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight ); if ((window.innerHeight + window.scrollY) >= pageHeight) { console.log("You are at the bottom of the page."); } }; <html> <body> <div style="width:100%; height:1500px"> Keep scrolling the page till end... </div> </body> </html>

2022-01-26 07:56:22

最简单的方法使用香草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

我为移动设备和桌面尝试了这个功能，这对我来说是工作，这里的一些评论在移动/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

你可以使用我们的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

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

推荐文章

最新文章

标签