我有一个 div 框（称为 Flux），里面有不同数量的内容。 此 divbox 已将溢出设置为自动。
现在，我想做的是，当使用滚动到此 DIV 框的底部时，将更多内容加载到页面中，我知道如何执行此操作（加载内容）但我不知道知道如何检测用户何时滚动到 div 标签的底部？ 如果我想对整个页面执行此操作，我会使用 .scrollTop 并从 .height 中减去它。
但我在这里似乎不能这样做？
我尝试从flux中获取.scrollTop，然后将所有内容包装在一个名为inner的div中，但如果我使用flux的innerHeight，它返回564px（div设置为500作为高度）和高度'innner' 它返回 1064，当在 div 底部时，滚动顶部显示 564。
我能做什么？
【问题讨论】：
标签： javascript jquery
您可以使用一些属性/方法：
$().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() 方法是将事件处理程序附加到文档的首选方法。
【讨论】：
innerHeight() 报告小数。在用户缩小的情况下，scrollTop() 和innerHeight() 的总和将始终至少比scrollHeight 少一小部分。我最终添加了一个 20 像素的缓冲区。结果条件为if(el.scrollTop() + el.innerHeight() >= el[0].scrollHeight - 20)，其中el 等于$(this)。
我找到了一个解决方案，当您滚动窗口并从底部显示 div 的末尾时会发出警报。
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
alert('end reached');
}
});
在这个例子中，如果你在 div (.posts) 完成时向下滚动，它会给你一个警报。
【讨论】：
var running = false。在条件内，我检查if(!running) { running = true; // and continue logic } 这样它只被调用一次！ AJAX 完成后，设置running = false;
尽管这个问题是在 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
}
某些元素不允许您滚动元素的整个高度。在这些情况下，您可以使用：
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');
}
});
【讨论】：
在简单的 DOM 使用中，您可以检查条件
element.scrollTop + element.clientHeight == element.scrollHeight
如果为真，那么你已经走到了尽头。
【讨论】：
如果您需要在具有 overflow-y 作为隐藏或滚动的 div 上使用它，那么您可能需要这样的东西。
if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {
at_bottom = true;
}
我发现需要 ceil 是因为 prop scrollHeight 似乎是圆形的，或者可能是其他一些原因导致它小于 1。
【讨论】：
如果您不使用 Math.round() 函数，Dr.Molle 的解决方案 suggested 在浏览器窗口具有缩放功能的某些情况下将不起作用。
例如 $(this).scrollTop() + $(this).innerHeight() = 600
$(this)[0].scrollHeight 产量 = 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');
}
})
});
【讨论】：
虽然这个问题已经问了将近 6 年，但在 UX 设计中仍然是热门话题，如果有新手想使用，这里有 demo sn-p
$(function() {
/* this is only for demonstration purpose */
var t = $('.posts').html(),
c = 1,
scroll_enabled = true;
function load_ajax() {
/* call ajax here... on success enable scroll */
$('.posts').append('<h4>' + (++c) + ' </h4>' + t);
/*again enable loading on scroll... */
scroll_enabled = true;
}
$(window).bind('scroll', function() {
if (scroll_enabled) {
/* if 90% scrolled */
if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {
/* load ajax content */
scroll_enabled = false;
load_ajax();
}
}
});
});h4 {
color: red;
font-size: 36px;
background-color: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="posts">
Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit
sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut
libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet
lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque
</div>【讨论】：
如果有人将scrollHeight 设为undefined，则选择元素的第一个子元素：mob_top_menu[0].scrollHeight
【讨论】：
不确定是否有帮助，但我就是这样做的。
我有一个比窗口大的索引面板，我让它滚动直到到达这个索引的末尾。然后我将其固定到位。一旦您滚动到页面顶部，该过程就会反转。
问候。
<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>
【讨论】：
这是另一个版本。
关键代码是函数scroller()，它使用overflow:scroll将输入作为包含滚动部分的div的高度。它大约距顶部 5 像素或距底部 10 像素，如顶部或底部。否则太敏感了。似乎 10px 大约是最小值。您会看到它在 div 高度上增加了 10 以获得底部高度。我认为 5px 可能会起作用，我没有进行广泛的测试。 YMMV。 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>';
?>
【讨论】：
伙计们，这是缩放问题的解决方案，它适用于所有缩放级别，以防你需要它：
if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {
console.log("bottom");
// We're at the bottom!
}
});
}
【讨论】：
$(window).on("scroll", function() {
//get height of the (browser) window aka viewport
var scrollHeight = $(document).height();
// get height of the document
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
// code to run when scroll to bottom of the page
}
});
This是github上的代码。
【讨论】：
我已经编写了这段代码，用于检测我何时滚动到元素的末尾！
let element = $('.element');
if ($(document).scrollTop() > element.offset().top + element.height()) {
/// do something ///
}
【讨论】：
没有一个对我有用，这个对我有用：
$(window).on('scroll', function() {
if ($(window).scrollTop() >= $('#flux').offset().top + $('#flux').outerHeight() - window.innerHeight) {
alert('You reached the end of the DIV');
}
});
【讨论】：