How to check if DIV has scrolled to the Bottom using JavaScript

Sharing a pure JavaScript solution here to check if a DIV is scrolled to the bottom. You don't need jQuery or any framework to do this. Just do this.

The Markup

<!DOCTYPE html>
<html>
<head>
    <style>
      div { font-size: 18px; 
        height: 400px;
        width: 50%;
        border: solid 1px #ccc;
        padding: 10px;
  	    overflow: auto; 
      }
    </style>
</head>

<body>
  <h2>Scroll the DIV till you reach the bottom of the element.</h2>
  
  <div id='d1'>
    <p>
      We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
    </p>
    <p>
      We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
    </p>
    <p>
      We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
    </p>
    <p>
      We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
    </p>
  </div>
</body>

The Script

The script to do something only when I have scrolled half the page.

<script>
  const ele = document.getElementById('d1');
 
  ele.addEventListener('scroll', function (e) {
    
    if (ele.scrollTop == (ele.scrollHeight - ele.clientHeight)) {
      r_fun ();
    }
  })

  let r_fun = () => {
    alert ("You have reached the bottom :-)");
  }
</script>
</html>

Try it

Its very similar to the example that I have shared in my previous blog post.

In the <style> section, I have assigned padding to the <div> element, along with other properties. This adds an extra "10 pixel" each at the top and bottom. We'll have to take these values into account while scrolling down (or up). Remember, the element can also have borders.

Now, look at the if statment inside the script. Here I am comparing the elements scrolltop (or the top position of the scroll) with total height of the scroll, minus the elements height.

← PreviousNext →