How to detect that the div was rolled to the end?

Asked

Viewed 1,368 times

12

I need to know if a certain div was rolled to the end, using jQuery. I’m having problems because the height of the div is not constant. The goal is that the automatic scrolling of the div does not occur, unless it is already rolled by the user until the end.

Code of the automatic scrolling:

$(".roller").animate({"scrollTop": $(".roller")[0].scrollHeight}, 500);
jquery html

  • If you are having problems, then you have already tried something. Can you show us how you did it? Maybe you are close to the final solution. And what was the matter with her?

  • @Guilhermebernal simply didn’t work it was blocking the execution of the script. I deleted the old code a month ago, but I had to go back to the project.

1 answer

7


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

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

If both are equal, the scroll is at its maximum. Example

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

  • 1

    I also added 100px of "grace", so that the automatic scrolling occurs even when it is not fully rolled, but needs to go there, because there is a new information to be displayed.

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.