如何确定 div 是否滚动到底部？

小开

最佳答案

你用 scrollTop == scrollHeight已经很接近了。

scrollTop是指滚动位置的顶部，即 scrollHeight - offsetHeight

你的 if 语句应该是这样的(别忘了使用三重等于) :

if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}

编辑: 更正我的回答，是完全错误的

小开

如果一个元素在滚动结束时返回 true，如果不是，返回 false。

element.scrollHeight - element.scrollTop === element.clientHeight

Mozilla Developer Network

小开

为了在考虑边框、水平滚动条和/或浮动像素计数的可能性时获得正确的结果，您应该使用..。

el.scrollHeight - el.scrollTop - el.clientHeight < 1

注意: 如果要获得正确的结果，必须使用 clientHeight 而不是 offsetHeight。只有当 el 没有边框或水平滚动条时，offsetHeight 才会给出正确的结果

小开

这个派对有点晚了，但是上面的答案似乎都不怎么管用，尤其是当..。

显示缩放适用于 UHD 显示器的操作系统
Scaling/zoom is applied to the browser

为了适应所有可能发生的情况，您将需要四舍五入计算滚动位置:

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight

小开

<!DOCTYPE HTML>
<html>
<head>
<title>JQuery | Detecting when user scrolls to bottom of div.
</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>


<body style="text-align:center;" id="body">
<h1 style="color:green;">
Data Center
</h1>
<p id="data_center" style="font-size: 17px; font-weight: bold;"></p>
<center>
<div class="div" style="width:200px; height:150px; overflow:auto;">
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
</div>
</center>
<script>
$('#data_center').text('Scroll till bottom to get alert!');
jQuery(function($) {
$('.div').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >=  $(this)[0].scrollHeight) {
alert('End of DIV has reached!');
}
});
});
</script>
</body>


</html>

这对我有用，我希望，这也能帮到你。谢谢。

小开

这个对我有用，只是方法有点不同。

if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
return 'scrollOnTheBottom';
}

小开

我在 https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/上找到的解决方案对我有用，希望对你也有用。

$(window).on('scroll', function() {
if ($(window).scrollTop() >= $(
'.div').offset().top + $('.div').
outerHeight() - window.innerHeight) {
alert('You reached the end of the DIV');
}
});

小开

function difference(first,sec){
return Math.abs(first-sec);
}


document.getElementById("myDIV").addEventListener("scroll", function() {
var diff = difference((this.scrollTop+this.clientHeight),(this.scrollHeight));
   

if(diff < 5) {
alert('Scroll Ends Here');
}
});

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: none;
overflow-y: auto;
}


#content {
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>


<p>Scroll inside the div element to display the number of pixels the content of div is scrolled horizontally and vertically.</p>


<div id="myDIV">
<div id="content">Scroll inside me!</div>
</div>


<p id="demo"></p>


</body>
</html>

没有 JQuery 或 Javascript 库，它工作得很好。