我有一个 div 框(称为 flux),里面的内容是可变的。 此 divbox 已将溢出设置为自动。
现在,我想做的是,当使用滚动到这个 DIV 框的底部时,将更多内容加载到页面中,我知道如何执行此操作(加载内容)但我不知道知道如何检测用户何时滚动到 div 标签的底部吗? 如果我想对整个页面执行此操作,我会使用 .scrollTop 并从 .height 中减去它。
但我这里好像做不到?
我尝试从 flux 获取 .scrollTop,然后将所有内容包装在一个名为 inner 的 div 中,但是如果我获取 flux 的 innerHeight,它返回 564px(div 设置为 500 作为高度)和'innner' 它返回 1064,当位于 div 底部时,scrolltop 返回 564。
我能做什么?
最佳答案
您可以使用一些属性/方法:
$().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)”更新为“开启”,如下所示:
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
关于javascript - 使用 jQuery 检测用户何时滚动到 div 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33903149/