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

84

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

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

这不起作用：

if (objDiv.scrollTop == objDiv.scrollHeight)

javascript scroll scrollbar

— 比约恩
source

只是在这里猜测是否（objDiv.scrollTop> objDiv.scrollHeight）并且可能需要从scrollHeight减小滚动箭头的大小（例如20px）

— Itay Moav -Malimovka 09年

一些文档： 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

— 穆罕默德

105

您即将使用scrollTop == scrollHeight。

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

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

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

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

— 詹姆斯·戴维斯
source

4

几乎可以正常工作，scrollHeight-offsetHeight与scrollTop的值并不完全相同，但是在尝试您的代码后，如果我要求该差异小于5像素才能成为底部，则可以得到我想要的行为。

— 比约恩

1

这是不准确的。需要考虑obj.borderWidth

— 循环播放

2

我更喜欢这个答案：stackoverflow.com/questions/5828275/…–

— 克里斯

3

scrollTop可以是非整数的，因此obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1在任何情况下都需要一定的容忍度（例如）。参见stackoverflow.com/questions/5828275/…–

— 克里斯·马丁

也许这与布局中的固定元素有关，或者我正在做其他一些奇怪的事情，但是只有当我一直滚动到顶部时，此结果才为true。这是因为在我的情况下document.body.scrollHeight等于document.body.offsetHeight（Chrome）

— Evan de la Cruz

24

为了在考虑诸如边框，水平滚动条和/或浮动像素数之类的问题时获得正确的结果，应使用...

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

注意：如果要获得正确的结果，必须使用clientHeight而不是offsetHeight。仅当el没有边框或水平滚动条时，offsetHeight才能为您提供正确的结果

— 斯宾塞
source

也是对我有用的唯一答案。我正在使用填充来隐藏滚动条。

— Craig

clientHeight工作得非常好。在接受的答案中使用offsetHeight给我的结果不是100％准确

— Finlay Roelofs

优雅，谢谢..您也可以在滚动事件@scroll="scrolling"中将其与Vue一起使用，然后使用以下方法：scrolling(event) { event.target // as el in the answer }祝您好运

— Yassine Sedrani

10

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

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

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

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

— 马修·莱顿
source

该答案是第一个正常工作的答案（我也测试了stackoverflow.com/q/5828275的答案）。正如其他人提到的那样，边距，缩放和其他因素也在起作用–这似乎可以解决所有问题。编辑：下面的斯宾塞的答案似乎基本相同，也正确。

— JanBradáč19年

8

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

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

Mozilla开发人员网络

— 伊曼纽尔·奥西莫苏（Emmanuel Osimosu）
source

1

对我来说，使用Chrome（其中元素为document.body）无法正常工作。document.body.scrollHeight并且document.bodyclientHeight具有相同的值，因此该表达式永远不会为真。

— 埃文·德拉克鲁斯

我们可以进行哪些编辑以使我们可以检测到该滚动接近底部。例如，如果滚动低于75％，则将其视为接近底部

— iamsaksham

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>

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

— 卡姆列什
source

0

好吧，我问自己也是一样，然后我发现了这种方式，在这里我举了一个使用事件的例子：

let scrollableElement = document.querySelector(".elementScrollable")

scrollableElement.addEventListener("scroll",function(event){
  if(event.target.scrollTop === event.target.scrollTopMax){
        console.log("The scroll arrived at bottom")
  }
})

— 艾略特·威廉姆森（Elliot Williamson）
source

0

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

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

— 亚历山大·格伦沃尔德（Aleks Grunwald）
source

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

— Himanshu Patni
source