Question

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

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

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

BTW：您需要为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

这实际上是正确的答案：

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 9

请看一下这个例子： 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 10

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

javascript：检测滚动结束

10 个答案: