Menu
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) 
975
To detect when a user scrolls to bottom of div with React, we can check if the sum of the scrollTop and clientHeight properties of a scrollable element is equal to the scrollHeight property of the same element. We call the useRef hook to create a ref and we assign the returned ref to the inner div, which is scrollable.
position(function(){ if($(this). position(). top == 100){ alert('checkThis'); } });
An even simpler way to do it is with scrollHeight, scrollTop, and clientHeight. Subtract the scrolled height from the total scrollable height. If this is equal to the visible area, you've reached the bottom! In react, just add an onScroll listener to the scrollable element, and use event.
Show activity on this post. Then when you scroll down you should see one really tall box. Right click on it and select inspect element. That should give you the information you need.
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
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
