Autoscroll to DIV after upgrade, only if already at the bottom of the DIV before upgrade

Question

The code below adds the content to the DIV and then scrolls it to show the new content:

<div id="Scrollable" style="height:400px; overflow:scroll;> 1<br /> 2<br /> 3<br /> 4<br /> </div> <script> // Should DIV be auto scrolled? var autoScroll = true; // Add new content $('#Scrollable').append('5<br />6<br />'); if ( autoScroll ){ // Scroll to bottom of DIV $('#Scrollable').animate({ scrollTop: $('#Scrollable').prop('scrollHeight') }); } </script> 

I need a check at var autoScroll = true to determine if the DIV is currently scrolling. So after adding new content, it will only perform autoscrolling if the DIV was at the bottom.

Answer 1

What problems did you encounter while trying to write this? Here's a jsFiddle example based on the first result that I found on Google for "jquery check if div div scrolls from bottom to bottom". It seems to be working fine.

http://jsfiddle.net/QB75Z/

And here is the link to the found article: http://www.yelotofu.com/2008/10/jquery-how-to-tell-if-youre-scroll-to-bottom/

EDIT . Here's the actual code from jsFiddle that I posted, in case someone searches and jsFiddle disappears. Have a scrollable div (give it a height and overflow-y: scroll ) with scrollable id and inner div inside that with inner class. You can then determine if the div is scrolling down or not using the following code:

 var scrollable = $('#scrollable'); var inner = $('#scrollable > .inner'); // check if div is scrolled to bottom before addition of new content var atBottom = Math.abs(inner.offset().top) + scrollable.height() + scrollable.offset().top >= inner.outerHeight(); // add additional content to .inner here if ( atBottom ) { // do stuff like scroll to bottom etc } 

Answer 2

Here is a good example of this here .

The following equivalence returns true if the element is at the end of its scroll, false if it is not.

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

The demo shown on this page is also very helpful.