113

在不使用 jQuery 或任何其他 JavaScript 库的情况下，如何确定带有垂直滚动条的 div 是否一直滚动到底部？

我的问题不是如何滚动到底部。我知道该怎么做。我想确定 div 是否已经滚动到底部。

这不起作用：

if (objDiv.scrollTop == objDiv.scrollHeight)
4

8 回答 8

129

你非常接近使用scrollTop == scrollHeight.

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

您的 if 语句应如下所示（不要忘记使用三等号）：

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

编辑：更正了我的答案，完全错误

于 2009-05-18T03:26:46.493 回答
48

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

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

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

于 2017-03-17T15:07:15.537 回答
18

这次聚会有点晚了，但是当...时，上述答案似乎都不是特别有效

  • 显示缩放应用于超高清显示器的操作系统
  • 缩放/缩放应用于浏览器

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

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight
于 2017-07-03T20:25:31.377 回答
10

如果元素位于其滚动的末尾，则返回 true，否则返回 false。

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

Mozilla 开发者网络

于 2015-01-26T08:39:02.130 回答
2 

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 库，它运行良好。

于 2021-07-03T17:58:08.393 回答
0 
<!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>

它对我有用，我希望，这也会对你有所帮助。谢谢。

于 2019-12-07T12:36:46.810 回答
0

这个对我有用。略有不同的做法。

if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
    return 'scrollOnTheBottom';
}
于 2020-10-06T10:51:18.590 回答
0

我在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'); 
        } 
});
于 2020-10-12T06:00:05.143 回答