CODEWITHSUNDEEP
javascriptscrollscrollbar
Bjorn
Bjorn

Reputation: 71950

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

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 not how to scroll to the bottom. I know how to do that. I want to determine if the the div is scrolled to the bottom already.

This does not work:

if (objDiv.scrollTop == objDiv.scrollHeight)

Upvotes: 134

Views: 103288

Answers (8)

Arthur A. Kennedy
Arthur A. Kennedy

Reputation: 51

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>

No JQuery or Javascript Library and it works well.

Upvotes: 5

Himanshu Patni
Himanshu Patni

Reputation: 195

The solution i found on https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ Worked for me, hope it will work for you too.

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

Upvotes: -1

Aleks Grunwald
Aleks Grunwald

Reputation: 385

This one works for me. Slightly a different approach.

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

Upvotes: 2

Kamlesh
Kamlesh

Reputation: 6135

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

Upvotes: -1

Matthew Layton
Matthew Layton

Reputation: 42390

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

Upvotes: 22

Spencer
Spencer

Reputation: 879

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

Upvotes: 64

James Davies
James Davies

Reputation: 9869

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

Upvotes: 153

Emmanuel Osimosu
Emmanuel Osimosu

Reputation: 6004

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

Upvotes: 11

Related Questions