我有一个 div 框（称为flux），里面有不同数量的内容。此 divbox 的溢出设置为自动。
现在，我想要做的是，当使用滚动到此 DIV 框的底部时，将更多内容加载到页面中，我知道如何执行此操作（加载内容）但我不知道如何检测用户何时滚动到 div 标签的底部？如果我想为整个页面执行此操作，我会使用 .scrollTop 并将其从 .height 中减去。
但我似乎不能在这里这样做？
我尝试从flux中获取.scrollTop，然后将所有内容包装在一个名为inner的div中，但是如果我获取flux的innerHeight，它会返回564px（div设置为500作为高度）和'innner'的高度它返回 1064，当 div 底部显示 564 时，scrolltop 返回。
我能做什么？
您可以使用一些属性/方法：
$().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/
编辑：我已将“绑定”更新为“开启”，如下所示：
从 jQuery 1.7 开始， .on() 方法是将事件处理程序附加到文档的首选方法。
我找到了一个解决方案，当您滚动窗口并从底部显示的 div 结束时，会向您发出警报。
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
alert('end reached');
}
});
在这个例子中，如果你在 div ( .posts) 完成时向下滚动它会给你一个警报。
尽管这个问题是在 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
}
这里只是一个附加说明，因为我在寻找我想要滚动的固定 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');
}
});
这将为您提供精确的位置，包括填充和边框
不过这对我有用
$(window).scroll(function() {
if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {
console.log('div reached');
}
});