检测用户何时使用jQuery滚动到div的底部

Question

我有一个div框(称为flux),里面有不同数量的内容.此divbox的溢出设置为auto.

现在,我想要做的是,当使用滚动到这个DIV框的底部,加载更多的内容到页面,我知道如何做到这一点(加载内容)但我不知道如何检测用户何时滚动到div标签的底部？如果我想在整个页面上执行此操作,我会使用.scrollTop并从.height中减去它.

但我似乎无法在这做到这一点？

我尝试从flux中获取.scrollTop,然后将所有内容包装在一个名为inner的div中,但是如果我使用innerHeight of flux它返回564px(div设置为500作为高度)和'innner'的高度它返回1064,而在div底部的scrolltop表示564.

我能做什么？

Answer 1

您可以使用一些属性/方法:

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

所以你可以得到前两个属性的总和,当它等于最后一个属性时,你已经到了最后:

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

http://jsfiddle.net/doktormolle/w7X9N/

编辑:我已根据以下内容将'bind'更新为'on':

从jQuery 1.7开始,.on()方法是将事件处理程序附加到文档的首选方法.

Answer 2

我找到了一个解决方案,当您滚动窗口并从底部显示div的结尾时,会给出警报.

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
        alert('end reached');
    }
});

在此示例中,如果在div(.posts)完成时向下滚动,则会给出警报.

Answer 3

虽然问题是在5.5年前提出的,但在今天的UI/UX环境中仍然存在相关问题.我想补充两分钱.

var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        // element is at the end of its scroll, load more content
    }

资料来源:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

某些元素不允许您滚动元素的整个高度.在这些情况下,您可以使用:

var element = docuement.getElementById('flux');
if (element.offsetHeight + element.scrollTop === element.scrollHeight) {
  // element is at the end of its scroll, load more content
}

Answer 4

这里只是另外一个注意事项,因为我在寻找我想要滚动的固定div的解决方案时发现了这一点.对于我的场景,我发现最好考虑div上的填充因此我可以完全达到目的.因此扩展@ Dr.Molle的答案我添加以下内容

$('#flux').bind('scroll', function() {
    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();
    var divTotalHeight = $(this)[0].scrollHeight 
                          + parseInt($(this).css('padding-top'), 10) 
                          + parseInt($(this).css('padding-bottom'), 10)
                          + parseInt($(this).css('border-top-width'), 10)
                          + parseInt($(this).css('border-bottom-width'), 10);

    if( scrollPosition == divTotalHeight )
    {
      alert('end reached');
    }
  });

这将为您提供精确的位置,包括填充和边框

Answer 5

这虽然对我有用

$(window).scroll(function() {
  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {
    console.log('div reached');
  }
});

Answer 6

如果您不使用 Math.round() 函数，当浏览器窗口具有缩放功能时，Dr.Molle建议的解决方案在某些情况下将不起作用。

例如 $(this).scrollTop() + $(this).innerHeight() = 600

$(this)[0].scrollHeight 产量 = 599.99998

600 >= 599.99998 失败。

这是正确的代码：

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {
            alert('end reached');
        }
    })
});

如果不需要严格的条件，您还可以添加一些额外的边距像素

var margin = 4

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {
            alert('end reached');
        }
    })
});