JavaScript：检测滚动结束

Question

我有一个设置了overflow为scroll的div层。

当滚动到div的底部时，我想要运行一个函数。

- Zebra

---

请查看此JSFiddle演示。 - Sender

截图损坏了。 - lilalinux

请查看此答案 scrollendevent 或者 MDN 文档 scrollend_event。 - Anil kumar

Answer 1

原先被接受的回答存在根本性错误，因此已被删除。正确的答案是：

function scrolled(e) {
  if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
    scrolledToBottom(e);
  }
}

我在Firefox、Chrome和Opera中测试过了，它可以用。

- Bjorn

---

因为它根本不能检测滚动结束，而是在滚动页面部分向上且包含div的高度相同时进行检测！假设您要滚动的内容是容器高度的两倍，一旦到达末尾，scrollTop值将是容器offsetHeight的两倍大小。被接受的答案会检查它们是否相等，但不会检测到末尾。我的解决方案是检查scrollTop +容器高度是否等于（或大于，这也可能发生）整个可滚动区域，这就是底部了！ - Bjorn

@Alex 的代码片段是 window.location.href = 'http://newurl.com'; 或 window.open('http://newurl.com');。 - Bjorn

请问您能否建议我如何检查 div 中的水平滚动条是否存在？ - Jay Shukla

我没有尝试过，但我想你可以使用offsetWidth、scrollWidth和scrollLeft来做类似的事情。 - Bjorn

有时候，myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight 总是返回 false。这种情况下，请使用 Math.round(myDiv.offsetHeight + myDiv.scrollTop) >= myDiv.scrollHeight。 - cguy

Answer 2

if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)
{
//your code here
}

我也搜索了它，即使查看了所有评论和更多信息，这是检查是否到达底部的解决方案。

- Moshe Cohen

Answer 3

我无法让上述两个答案起作用，所以这里有第三个选项适用于我！（这与jQuery一起使用）

if (($(window).innerHeight() + $(window).scrollTop()) >= $("body").height()) {
    //do stuff
}

希望这能帮到任何人！

- just_user

Answer 4

好的，这里有一个好的适当的解决方案。

你有一个带有id="myDiv"的Div调用。

所以函数如下。

function GetScrollerEndPoint()
{
   var scrollHeight = $("#myDiv").prop('scrollHeight');
   var divHeight = $("#myDiv").height();
   var scrollerEndPoint = scrollHeight - divHeight;

   var divScrollerTop =  $("#myDiv").scrollTop();
   if(divScrollerTop === scrollerEndPoint)
   {
       //Your Code 
       //The Div scroller has reached the bottom
   }
}

- maxspan

---

对我有效，使用 Chrome 测试表格。 - Adrian

谢谢！这对我来说在Firefox和Chrome上都有效 :D - mr5

Answer 5

这对我有用：

$(window).scroll(function() {
  buffer = 40 // # of pixels from bottom of scroll to fire your function. Can be 0
  if ($(".myDiv").prop('scrollHeight') - $(".myDiv").scrollTop() <= $(".myDiv").height() + buffer )   {
    doThing();
  }
});

必须使用jQuery 1.6或更高版本

- AlexQueue

Answer 6

我基于Bjorn Tipling的答案创建了一个基于事件的解决方案:

(function(doc){
    'use strict';

    window.onscroll = function (event) {
        if (isEndOfElement(doc.body)){
            sendNewEvent('end-of-page-reached');
        }
    };

    function isEndOfElement(element){
        //visible height + pixel scrolled = total height 
        return element.offsetHeight + element.scrollTop >= element.scrollHeight;
    }

    function sendNewEvent(eventName){
        var event = doc.createEvent('Event');
        event.initEvent(eventName, true, true);
        doc.dispatchEvent(event);
    }
}(document));

您可以这样使用该事件：

document.addEventListener('end-of-page-reached', function(){
    console.log('you reached the end of the page');
});

顺便提一下：您需要添加此CSS，以便JavaScript知道页面的长度。

html, body {
    height: 100%;
}

演示：http://plnkr.co/edit/CCokKfB16iWIMddtWjPC?p=preview

这是一个演示链接，可以展示相关的IT技术。请点击链接查看详情。

- Pylinux

---

我现在看到 OP 要求的是 div 的末尾而不是页面的末尾，但我将保留答案以便帮助其他人。 - Pylinux

Answer 7

现在有一个实验性的onscrollend事件https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollend_event

目前只在Firefox 109+中工作，如果其他浏览器跟上会很好。

有一个polyfill可以解决这个问题https://github.com/argyleink/scrollyfills 使用方法如下：

import "scrollyfills";
...
    scrollContainer.addEventListener(
      "scrollend",
      (ev) => { console.log('scroll END') }
    );

- Aleksandr Smyshliaev

Answer 8

我找到了一个可行的替代方案。

这些答案都不适用于我（当前在FireFox 22.0中测试），经过大量研究，我发现了一个似乎更加简洁明了的解决方案。

实施的解决方案：

function IsScrollbarAtBottom() {
    var documentHeight = $(document).height();
    var scrollDifference = $(window).height() + $(window).scrollTop();
    return (documentHeight == scrollDifference);
}

资源： http://jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html

敬礼

- Chandler Zwolle

---

这也是唯一对我有效的答案，谢谢！ - YtramX

Answer 9

这将是正确的答案：

function scrolled(event) {
   const container = event.target.body
   const {clientHeight, scrollHeight, scrollY: scrollTop} = container

   if (clientHeight + scrollY >= scrollHeight) {
    scrolledToBottom(event);
   }
}

使用事件的原因是获取最新的数据，如果你直接引用div，你将得到过时的scrollY并且无法正确检测位置。另一种方法是将其包装在setTimeout中，并等待数据更新。

- ddavidad

Answer 10

请看这个例子：MDN Element.scrollHeight 我建议您查看这个例子：stackoverflow.com/a/24815216...，它实现了跨浏览器的滚动处理。

您可以使用以下代码片段：

//attaches the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        scrollTop = target.scrollTop || window.pageYOffset,
        scrollHeight = target.scrollHeight || document.body.scrollHeight;
    if (scrollHeight - scrollTop === $(target).innerHeight()) {
      console.log("► End of scroll");
    }
});

- jherax