Scroll on bottom
brunoqs opened this issue · 3 comments
brunoqs commented
How can i use this lib to know if the scroll is in the bottom of page
n8tb1t commented
I'll come back to you with some example a bit later, in general, you need to measure the total scroll height and the scroll position if they are equal it means we reached the end of the page...
lukebelbina commented
In case this is useful here's what I ended up doing:
const [isBottom, setIsBottom] = React.useState(false);
useScrollPosition(({ prevPos, currPos }) => {
// todo cache the page height
if (!isBottom && currPos.y * -1 === document.body.offsetHeight - window.innerHeight) {
setIsBottom(true);
// do my code here which includes loading more data from a webservice
} else {
setIsBottom(false);
}
});
kantmichel commented
To add to @KBelbina's reply. Here's what i did to cache the page height on page load:
const [pageHeight, setPageHeight] = useState()
useEffect(() => {
setPageHeight(
document.documentElement.scrollHeight -
document.documentElement.offsetHeight
)
}, [])
I think currPos.y measures the top of the screen view. Not the bottom, so hence the offsetHeight so that you can check if someone scrolled all the way down.