检测当用户滚动到底部的div与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()方法是将事件处理程序附加到文档的首选方法。

只是一个额外的注意在这里，因为我发现这当寻找一个解决方案的固定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');
}
});

这将为您提供精确的位置，包括填充和边框

我发现了一个解决方案，当你滚动你的窗口和div的结束显示从底部给你一个警告。

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

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

不过这对我来说很管用

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

这是另一个版本。

关键代码是函数scroller()，它使用overflow:scroll将输入作为包含滚动部分的div的高度。它近似于距离顶部5px或距离底部10px作为顶部或底部。否则就太敏感了。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>';


?>

如果有人将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>

如果你需要在一个隐藏了overflow-y或滚动的div上使用它，像这样的东西可能就是你需要的。

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

我发现celll是需要的，因为prop scrollHeight似乎是圆的，或者可能是其他原因导致这是由小于1。

虽然这个问题是在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
}

如果你没有使用Math.round()函数，Dr.Molle的建议解决方案在某些情况下当浏览器窗口有缩放时将不起作用。

(美元)[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');
}
})
});

伙计们，这是缩放问题的解决方案，它适用于所有缩放级别，以防你需要它:

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
}
});

这是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>

在简单的DOM使用中，您可以检查条件

element.scrollTop + element.clientHeight == element.scrollHeight

如果是这样，那么你已经到达了终点。

我精心编写了这段代码，用于检测何时滚动到元素的末尾!

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');
}
});