我有一个div框(称为flux)，里面有可变数量的内容。 此divbox已将溢出设置为自动。
现在，我要做的是，当使用滚动到这个div框的底部，加载更多的内容到页面，我知道如何做到这一点(加载内容)，但我不知道如何检测当用户已经滚动到div标签的底部? 如果我想对整个页面都这样做，我将使用。scrolltop并从。height中减去它。
但我在这里好像做不到?
我已经尝试从通量。scrolltop，然后包装内的所有内容在一个div称为内部，但如果我采取通量的innerHeight它返回564px (div被设置为500作为高度)和“内部”的高度它返回1064，而滚动顶部，当在div的底部说564。
我该怎么办?
当前回答
我发现了一个解决方案，当你滚动你的窗口和div的结束显示从底部给你一个警告。
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
alert('end reached');
}
});
在这个例子中，如果你向下滚动div (.posts)完成它会给你一个警告。
其他回答
你可以使用一些属性/方法:
$().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，我想滚动。对于我的场景，我发现最好考虑到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');
}
});
这将为您提供精确的位置，包括填充和边框
虽然这个问题是在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的结束显示从底部给你一个警告。
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
alert('end reached');
}
});
在这个例子中，如果你向下滚动div (.posts)完成它会给你一个警告。
这是另一个版本。
The key code is function scroller() which takes input as the height of the div containing the scrolling section, using overflow:scroll. It approximates 5px from the top or 10px from the bottom as at the top or bottom. Otherwise it's too sensitive. It seems 10px is about the minimum. You'll see it adds 10 to the div height to get the bottom height. I assume 5px might work, I didn't test extensively. YMMV. scrollHeight returns the height of the inner scrolling area, not the displayed height of the div, which in this case is 400px.
<?php
$scrolling_area_height=400;
echo '
<script type="text/javascript">
function scroller(ourheight) {
var ourtop=document.getElementById(\'scrolling_area\').scrollTop;
if (ourtop > (ourheight-\''.($scrolling_area_height+10).'\')) {
alert(\'at the bottom; ourtop:\'+ourtop+\' ourheight:\'+ourheight);
}
if (ourtop <= (5)) {
alert(\'Reached the top\');
}
}
</script>
<style type="text/css">
.scroller {
display:block;
float:left;
top:10px;
left:10px;
height:'.$scrolling_area_height.';
border:1px solid red;
width:200px;
overflow:scroll;
}
</style>
$content="your content here";
<div id="scrolling_area" class="scroller">
onscroll="var ourheight=document.getElementById(\'scrolling_area\').scrollHeight;
scroller(ourheight);"
>'.$content.'
</div>';
?>
