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

Posted 2023-02-21

技术标签:

【中文标题】如何确定 div 是不是滚动到底部？【英文标题】：How can I determine if a div is scrolled to the bottom?如何确定 div 是否滚动到底部？ 【发布时间】：2010-10-26 22:36:34 【问题描述】：

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

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

这不起作用：

if (objDiv.scrollTop == objDiv.scrollHeight)

【问题讨论】：

只是在这里猜测如果 (objDiv.scrollTop > objDiv.scrollHeight) 并且可能需要从 scrollHeight 减小滚动箭头的大小（比如 20px）一些文档：developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight ... ... ... developer.mozilla.org/en-US/docs/Web/API/htmlElement/… ... ... ... api.jquery.com/height ... ... ... api.jquery.com/innerheight ... ... ... api.jquery.com/outerheight 【参考方案1】：

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

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。【参考方案2】：

我在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'); 
         
);

【讨论】：

【参考方案3】：

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

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

【讨论】：

【参考方案4】：

<!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>

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

【讨论】：

【参考方案5】：

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

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

为了适应所有可能发生的情况，您需要将计算出的滚动位置向上取整：

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

【讨论】：

这个答案是第一个正常工作的答案（我也测试了***.com/q/5828275 的答案）。正如其他人所提到的，边距、缩放和其他因素开始发挥作用——这似乎可以解决所有问题。 编辑：下面斯宾塞的回答似乎基本相同，也正确。【参考方案6】：

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

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

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

【讨论】：

也是唯一对我有用的答案。我正在使用填充来隐藏滚动条。 clientHeight 工作得非常好。在接受的答案中使用 offsetHeight 给了我一个不是 100% 准确的结果优雅，谢谢.. 你也可以在滚动事件@scroll="scrolling" 然后在方法scrolling(event) event.target // as el in the answer 中将它与Vue一起使用祝你好运这应该是公认的答案。这是在移动设备上对我有用的唯一答案。您可以在用户滚动 div 时检查这一点，使用内置属性 onscroll【参考方案7】：

使用scrollTop == scrollHeight 非常接近。

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

你的 if 语句应该是这样的（不要忘记使用三等号）：

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

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

【讨论】：

这几乎可以工作，scrollHeight-offsetHeight 与 scrollTop 的值不完全相同，但是在尝试了您的代码之后，如果我要求该差异小于 5 像素，则它是我得到的底部我想要的行为。这不准确。 obj.borderWidth 需要考虑我更喜欢这个答案：***.com/questions/5828275/… scrollTop 可以是非整数的，因此这需要一些容差（例如，obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1）才能在所有情况下工作。见***.com/questions/5828275/… 也许它与我的布局上的固定元素有关，或者我正在做的其他奇怪的事情，但唯一一次评估为真的是当我一直滚动到顶部时。这是因为在我的实例 (Chrome) 中 document.body.scrollHeight 等于 document.body.offsetHeight【参考方案8】：

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

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

Mozilla Developer Network

【讨论】：

对我来说，使用元素为 document.body 的 Chrome，这是行不通的。 document.body.scrollHeight 和 document.bodyclientHeight 具有相同的值，因此表达式永远不会为真。我们可以进行哪些编辑以便我们可以检测到滚动条接近底部。例如，如果滚动率低于 75%，则认为它接近底部

以上是关于如何确定 div 是不是滚动到底部？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用Vue快速将多行附加到div（一次一行）并滚动到底部？

Div在加载时滚动到底部

如何触发jScrollPane滚动到底部事件

如何通过JQuery将DIV的滚动条滚动到指定的位置

如何用js控件div的滚动条，让它在内容更新时自动滚到底部？

我做了个网页，页面已经到底部了，滚动条还可以下拉。