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

我有一个div框(称为通量),内含可变数量的内容。 这个divbox溢出设置为auto。

现在,我正在尝试做的是,当使用滚动到此DIV框的底部,加载更多的内容到页面,我知道如何做到这一点(加载内容),但我不知道如何检测用户何时滚动到div标签的底部? 如果我想为整个页面做,我会采取.scrollTop并从.height减去。

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

我已经尝试从flux中取出.scrollTop,然后将所有内容包裹在一个名为inner的div中,但是如果我将innerHeight的flux函数返回564px(div设置为500,高度),并且“innner”它将返回1064,并在div的底部显示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/

编辑:我已经更新'绑定'为'开'按照:

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

我find了一个解决scheme,当你滚动窗口,从底部显示一个div结束给你一个警报。

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

在这个例子中,如果你向下滚动div( .posts )完成它给你一个警报。

只是在这里额外的注意,因为我find了一个固定的div的解决scheme,我想要滚动。 对于我的情况,我发现它最好考虑到在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

这虽然为我工作

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

如果有人将scrollHeightundefined ,则select元素的第一mob_top_menu[0].scrollHeight元素: mob_top_menu[0].scrollHeight

如果您不使用Math.round()函数,则在浏览器窗口变焦的情况下,Dr.Molle build议的解决scheme在某些情况下不起作用。

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

$(this)[0] .scrollHeight yield = 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'); } }) }); 

不知道是否有任何帮助,但这是我如何做到这一点。

我有一个更大的窗口,我让它滚动索引面板,直到达到这个指数结束。 然后我把它固定在位。 一旦您向页面顶部滚动,过程就会逆转。

问候。

 <style type="text/css"> .fixed_Bot { position: fixed; bottom: 24px; } </style> <script type="text/javascript"> $(document).ready(function () { var sidebarheight = $('#index').height(); var windowheight = $(window).height(); $(window).scroll(function () { var scrollTop = $(window).scrollTop(); if (scrollTop >= sidebarheight - windowheight){ $('#index').addClass('fixed_Bot'); } else { $('#index').removeClass('fixed_Bot'); } }); }); </script> 

如果你需要在一个已经溢出的div上使用这个隐藏或者滚动的东西,那么你可能需要这样的东西。

 if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) { at_bottom = true; } 

我发现ceil是需要的,因为prop scrollHeight似乎是圆的,或者是其他原因造成这个不到1的原因。

伙计们这是解决缩放问题的办法,它适用于所有的缩放级别,以防万一你需要它:

 if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) { console.log("bottom"); // We're at the bottom! } }); } 

这是另一个版本。

关键代码是函数scroller(),它将input作为包含滚动部分的div的高度,使用overflow:scroll。 它从顶部接近5像素,底部接近底部10像素。 否则,它太敏感了。 看来10px是最低的。 你会看到它增加了10的高度,以获得底部的高度。 我假设5px可能工作,我没有广泛的testing。 因人而异。 scrollHeight返回内部滚动区域的高度,而不是div的显示高度,在这种情况下是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>'; ?>