当用户使用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'); } });
如果有人将scrollHeight为undefined ，则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>'; ?>
