How to detect that the div has been rolled to the end?


I need to know if a certain div has been rolled to the end using jQuery. I'm having problems because the height of div is not constant. The goal is to automatically roll div down unless it has already been rolled by the user to the end.

Auto-scrolling code:

$(".roller").animate({"scrollTop": $(".roller")[0].scrollHeight}, 500);
asked by anonymous 16.12.2013 / 03:05

1 answer


As there is no scroll bottom property, you can do some calculations using the scrollTop property of your element (how much it has already rolled from the beginning), its scrollHeight property (the maximum that it it can scroll) and the clientHeight property of the document (the size of viewport ):

var top = $(".roller")[0].scrollTop;
var maxTop = $(".roller")[0].scrollHeight - document.documentElement.clientHeight;

If both are the same, scrolling is at its maximum value. Example

If necessary, replace document.documentElement.clientHeight with the height of the container of your .roller , if it is different from the viewport height .

16.12.2013 / 03:43