How to determine if a div is scrolling down?

Question

How to determine, without using jQuery or any other JavaScript library, if a div with a vertical scrollbar scrolls to the end?

My question is not how to scroll to the end. I know how to do it. I want to determine if the div scrolls to the end.

This does not work:

if (objDiv.scrollTop == objDiv.scrollHeight) 

Answer 1

You are pretty close using scrollTop == scrollHeight .

scrollTop refers to the top of the scroll position, which will be scrollHeight - offsetHeight

Your if statement should look like this (remember to use triple equalities):

 if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight)) { } 

Edit: Fixed my answer, was completely wrong

Answer 2

Returns true if the element is at the end of its scroll, and false if it is not.

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

Mozilla Developer Network

Answer 3

In order to get the correct results, taking into account such things as the possibility of a border, the horizontal scrollbar and / or the number of floating pixels, you should use ...

 el.scrollHeight - el.scrollTop - el.clientHeight < 1 

NOTE. . You should use clientHeight instead of offsetHeight if you want to get the correct results. offsetHeight will only give you correct results when el has no border or horizontal scrollbar.

Answer 4

It's a bit late for this party, but none of the above answers work particularly well when ...

• Screen Scaling Applies to OS for UHD Displays
• Scaling / scaling applied to the browser

To accommodate all possible situations, you need to round the estimated scroll position:

 Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight