发表新帖
发表新帖

How can I determine if a div is scrolled to the bottom?

后端 未结
关注
8 728
难免孤独
难免孤独 2020-12-12 20:18

How do I determine, without using jQuery or any other JavaScript library, if a div with a vertical scrollbar is scrolled all the way to the bottom?

My question is no

相关标签:
8条回答
  • 一个人的身影
    2020-12-12 20:32

    You're pretty close using scrollTop == scrollHeight.

    scrollTop refers to the top of the scroll position, which will be scrollHeight - offsetHeight

    Your if statement should look like so (don't forget to use triple equals):

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

    Edit: Corrected my answer, was completely wrong

    0 讨论(0)
  • 迷失自我
    2020-12-12 20:33

    Returns true if an element is at the end of its scroll, false if it isn't.

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

    Mozilla Developer Network

    0 讨论(0)
  • 隐瞒了意图╮
    2020-12-12 20:39

    In order to get the correct results when taking into account things such as the possibility of a border, horizontal scrollbar, and/or floating pixel count, you should use...

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

    NOTE: You MUST use clientHeight instead of offsetHeight if you want to get the correct results. offsetHeight will give you correct results only when el doesn't have a border or horizontal scrollbar

    0 讨论(0)
  • Happy的楠姐
    2020-12-12 20:39

    This one works for me. Slightly a different approach.

    if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
    return 'scrollOnTheBottom';
}
    0 讨论(0)
  • 北荒
    2020-12-12 20:47 
    <!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>

    It works for me, i hope, this will also help you. Thanks.

    0 讨论(0)
  • 臣服心动
    2020-12-12 20:48

    Little late to this party, but none of the above answers seem to work particularly well when...

    • Display scaling is applied to the OS for UHD displays
    • Scaling/zoom is applied to the browser

    To accommodate for all eventualities, you will need to round up the calculated scroll position:

    Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight
    0 讨论(0)
 看不清?
提交回复
热议问题