javascript：检测滚动结束

我有一个

div

层，其中

overflow

设置为

scroll

当滚动到

div

的底部时，我想运行一个函数

---

被接受的答案从根本上说是有缺陷的，后来被删除了。正确答案是：

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

---

在Firefox、Chrome和Opera中进行了测试。它是有效的。

我无法得到上述任何一个答案，所以这里有第三个选项对我有效！（这与jQuery一起使用）

希望这对任何人都有帮助

这对我很有用：

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

$（窗口）。滚动（函数（）{
buffer=40/#像素，从滚动的底部开始启动你的功能。可以是0
如果（$（“.myDiv”）.prop（'scrollHeight'）-$（.myDiv”）.scrollTop（）我找到了一个可行的替代方案

这些答案都不适用于我（目前在FireFox 22.0中进行测试），经过大量研究，我发现，这似乎是一个更干净、更直接的解决方案

实施的解决方案：

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

资源：

关于
好的，这是一个好的、适当的解决方案

您有一个带有
id=“myDiv”

因此，函数开始运行

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
   }
}

看看这个例子：

我建议查看以下示例：，它实现了滚动操作的跨浏览器处理

您可以使用以下代码段：

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

由于
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();
    }
});

我根据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%;
}

演示：

我也搜索了它，甚至在检查了所有评论之后，
这是检查是否到达底部的解决方案。
这实际上是正确答案：

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

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

使用
事件的原因是最新数据，如果直接引用div，则会出现过时的
滚动
，并且无法正确检测位置

另外一种方法是将其包装在一个
setTimeout
中，等待数据更新。
您能告诉我们它有缺陷的原因吗？因为它根本不检测滚动结束，所以它会检测页面向上滚动的部分和包含div的高度是否相同！假设您要滚动的内容是h的两倍八个div，一旦到达最末端，scrollTop值的大小将是容器的离地高度的两倍。接受的答案将检查这些值是否相等，并且不会检测到末端。我的解决方案将检查scrollTop+容器的高度是否等于（或大于，发生这种情况时）整个可滚动区域，现在是底部！@Alex
window.location.href=http://newurl.com“；
或
窗口。打开（'http://newurl.com“）；
+上面的代码。提示是你不能让它工作就是使用CSS:
html，body:{height:100%}
。你能建议我如何检查div中的水平滚动条吗？检查这个屏幕截图是为我做的，用Chrome和Table进行测试谢谢！这对Firefox和Chrome都有效：我现在看到OP要求的是div的结尾，而不是页面的结尾，但我会在这里留下答案，以防对某些人有所帮助这也是唯一对我有效的答案，谢谢！
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)
{
//your code here
}

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

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