128

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) 
2

8 Answers 8

142

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

5
  • 6
    That almost works, scrollHeight-offsetHeight isn't exatly the same value as scrollTop, but after trying your code, if I require if that difference is fewer than 5 pixels for it to be the bottom I get the behavior I want.
    – Bjorn
    May 18, 2009 at 4:20
  • 2
    this is not exact. obj.borderWidth need to be considered
    – looping
    Oct 22, 2013 at 3:39
  • 2
    i prefer this answer: stackoverflow.com/questions/5828275/…
    – Chris
    Feb 12, 2014 at 10:49
  • 6
    scrollTop can be non-integral, so this requires some tolerance (say, obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1) to work in all circumstances. See stackoverflow.com/questions/5828275/… Aug 29, 2015 at 6:13
  • maybe it has something to do with the fixed elements on my layout or something else odd I'm doing but the only time this evaluates to true is when I scroll all the way to the top. This is because document.body.scrollHeight equals document.body.offsetHeight in my instance (Chrome) Sep 29, 2016 at 18:20
59

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

6
  • Also the only answer that worked for me. I'm using padding to hide the scrollbar.
    – Stark
    Aug 15, 2018 at 18:19
  • clientHeight worked really nice. using the offsetHeight in the accepted answer gave me a result that wasn't 100% accurate Dec 2, 2019 at 15:32
  • elegant, thank you.. you can also use it with Vue in a scroll event @scroll="scrolling" then in the methods scrolling(event) { event.target // as el in the answer } Good luck Jan 17, 2020 at 18:11
  • This should be the accepted answer. This is the only answer that worked for me on mobile.
    – Tzach
    Jan 21, 2021 at 19:15
  • You can check for this when the user scrolls the div, using the built in property onscroll
    – Dror Bar
    Feb 9, 2021 at 12:31
21

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
1
  • 1
    This answer is the first one that works properly (I have tested the answers from stackoverflow.com/q/5828275 as well). As others have mentioned, margins, zoom and other factors come into play – and this seems to handle them all. Edit: Spencer's answer below seems to be basically the same, also correct. Dec 12, 2019 at 7:56
11

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

3
  • 3
    For me, using Chrome, where the element is document.body, this does not work. document.body.scrollHeight and document.bodyclientHeight have the same value and so the expression is never true. Sep 29, 2016 at 18:14
  • What edit can we do so that we can detect, that scroll is near bottom. For example if scroll is below 75%, consider it near bottom
    – iamsaksham
    Feb 23, 2017 at 6:29
  • This just works, plain and simple. +1 Thanks. For anyone wondering where the element came from, you can get it by for example const element = getElementById("yourElementId")
    – RukshanJS
    Apr 25, 2022 at 9:44
3

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.

1
  • 3
    While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.
    – Ghost
    Jul 3, 2021 at 18:01
1

This one works for me. Slightly a different approach.

if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
    return 'scrollOnTheBottom';
}
1
  • Wonderfully works! Upvote. Nov 24 at 18:19
0

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'); 
        } 
});
1
  • O.P. specifically asked no JS libraries Nov 24 at 18:20
-1
<!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.

1
  • O.P. specifically asked no JS libraries Nov 24 at 18:19

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.