How can I determine if a div is scrolled to the bo

Question

How do I determine, without using jQuery or any other JavaScript library, if a div with a vertical scrollbar is scrolled all the way to the bottom?

My question is not how to scroll to the bottom. I know how to do that. I want to determine if the the div is scrolled to the bottom already.

This does not work:

if (objDiv.scrollTop == objDiv.scrollHeight) 

Answer 1

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

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

NOTE: You MUST use clientHeight instead of offsetHeight if you want to get the correct results. offsetHeight will give you correct results only when el doesn't have a border or horizontal scrollbar

Answer 2

You're 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 so (don't forget to use triple equals):

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

Edit: Corrected my answer, was completely wrong

Answer 3

Returns true if an element is at the end of its scroll, false if it isn't.

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

Mozilla Developer Network

Answer 4

Little late to this party, but none of the above answers seem to work particularly well when...

• Display scaling is applied to the OS for UHD displays
• Scaling/zoom is applied to the browser

To accommodate for all eventualities, you will need to round up the calculated scroll position:

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