How to check if the scroll bar is at the bottom

Question

How can you check if the scroll bar is located at the bottom? Using jQuery or JavaScript

Answer 1

You find the height of the scroll container, and then compare it with the scroll position. If they match, then you have reached the bottom.

<div style="overflow: auto; height: 500px"> </div> $(document).ready(function() { $('div').scroll(function() { var div = $(this); if (div.height() == div.scrollTop() + 1) //scrollTop is 0 based { alert('Reached the bottom!"); } }); }); 

Edit: a little testing in the js fiddle, and I realized that the previous version is incorrect. You can use the DOM property to find out how much scrolling is done with a little math with an element height like this.

  var div = $(this); if (div[0].scrollHeight - div.scrollTop() == div.height()) { alert('Reached the bottom!'); } 

http://jsfiddle.net/Aet2x/1/

Answer 2

This worked for me (using jQuery):

 $(document).ready(function(){ $('div').scroll(function(){ //scrollTop refers to the top of the scroll position, which will be scrollHeight - offsetHeight if(this.scrollTop == (this.scrollHeight - this.offsetHeight)) { console.log("Top of the bottom reached!"); } }); }); 

Taken from here .

Answer 3

You can check if the scrollTop element is equal to the scrollTop element.

 if($('div').scrollTop() == $('div').innerHeight()){ //Reached the bottom }