How to check if scroll is near the bottom

Question

I have Dropdown list in my React app: when scrolling on the bottom I'm fetching next elements from backend so my dropdown list is dynamic. I want to know if I'm on the bottom of the list - then I want to fetch next elements. How to check if it's time to fetch next elements?

function handleOnScroll(e) {
        const { scrollTop, scrollHeight, offsetHeight } = e.target;
        if (offsetHeight - scrollTop < 50) {
            handleLoadNextElements();
        }
    }

What conditions should I use to fetch next elements when I'm on teh bottom of my scrollable list?

user_9914736 · Answer

This should work for a vertical scroll. Solution based on Detecting when user scrolls to bottom of div with React js

function handleOnScroll(e) {
    const bottom = e.target.scrollHeight - e.target.clientHeight <= e.target.scrollTop + 50;
    if (bottom) {
        handleLoadNextElements();
    }
}

If you want full compatibility with mobile you might want to take a look of this library, it works perfectly on mobile. react-bottom-scroll-listener

user_6022333 · Answer

I fixed my problem by adding onScroll to my div:

and then:

function handleOnScroll(e) {
        const { scrollTop, scrollHeight, offsetHeight } = e.target;
        const hasScrollReachedBottom =
            offsetHeight + scrollTop > scrollHeight - 40;

        if (hasScrollReachedBottom) {
            handleLoad();
        }
    }

Works excellent:)

How to check if scroll is near the bottom

2 Answers