我有一个div框(称为flux)，里面有可变数量的内容。 此divbox已将溢出设置为自动。
现在，我要做的是，当使用滚动到这个div框的底部，加载更多的内容到页面，我知道如何做到这一点(加载内容)，但我不知道如何检测当用户已经滚动到div标签的底部? 如果我想对整个页面都这样做，我将使用。scrolltop并从。height中减去它。
但我在这里好像做不到?
我已经尝试从通量。scrolltop，然后包装内的所有内容在一个div称为内部，但如果我采取通量的innerHeight它返回564px (div被设置为500作为高度)和“内部”的高度它返回1064，而滚动顶部，当在div的底部说564。
我该怎么办?
当前回答
$(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
}
});
这是github上的代码。
其他回答
你可以使用一些属性/方法:
$().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()方法是将事件处理程序附加到文档的首选方法。
如果你需要在一个隐藏了overflow-y或滚动的div上使用它，像这样的东西可能就是你需要的。
if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {
at_bottom = true;
}
我发现celll是需要的，因为prop scrollHeight似乎是圆的，或者可能是其他原因导致这是由小于1。
$(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
}
});
这是github上的代码。
虽然这个问题在6年前就被问到了，但在UX设计中仍然是一个热门话题，如果有新手想用的话，这里有一个演示片段
$(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>
我发现了一个解决方案，当你滚动你的窗口和div的结束显示从底部给你一个警告。
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
alert('end reached');
}
});
在这个例子中，如果你向下滚动div (.posts)完成它会给你一个警告。
