javascript：检测滚动结束

Question

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

当滚动到div的底部时，我想运行 function。

Answer 1

公认的答案从根本上来说是有缺陷的，此后已被删除。 正确的答案是：

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

在Firefox，Chrome和Opera中对此进行了测试。 有用。

Answer 2

我无法获得以上任何一个答案，因此这是对我有用的第三个选择！ （与jQuery一起使用）

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

希望这对任何人有帮助！

Answer 3

好的，这是一个很好的解决方案

您有一个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
   }
}

Answer 4

这对我有用：

$(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或更高版本

Answer 5

我找到了可行的替代方法。

这些答案对我都不起作用（当前正在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

问候

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

顺便说一句：您需要为JavaScript添加此CSS才能知道页面有多长时间

html, body {
    height: 100%;
}

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

Answer 7

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

我也进行了搜索，即使在检查了所有评论以及更多评论之后，这也是检查是否到达底部的解决方案。

Answer 8

看一下这个例子： 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");
    }
});

Answer 9

由于innerHeight在某些旧的IE版本中不起作用，因此可以使用clientHeight ：

$(window).scroll(function (e){
    var body = document.body;    
    //alert (body.clientHeight);
    var scrollTop = this.pageYOffset || body.scrollTop;
    if (body.scrollHeight - scrollTop === parseFloat(body.clientHeight)) {
        loadMoreNews();
    }
});

Answer 10

这实际上是正确的答案：

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

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

使用该event的原因是最新的数据，如果您直接使用div的引用，您将获得过时的scrollY并且将无法正确检测位置。

另一种方法是将其包装在setTimeout然后等待数据更新。

Answer 11

为了在 React\/JSX 中做同样的事情，这里是代码片段。

export const scrolledToEnd = event => {
  const container = event.target;

  if (container.offsetHeight + container.scrollTop >= container.scrollHeight) {
    return true;
  }
  return false;
};

Answer 12

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

目前仅在 firefox 109+ 有效，如果其他浏览器赶上会很好。

有那个https://github.com/argyleink/scrollyfills的 polyfill 使用像

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