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?

<Content>
        <MySelectField onClick={handleOnClick} onScroll={handleOnScroll}>

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?

Answer 1

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

Answer 2

I fixed my problem by adding onScroll to my div:

 <TemplateSelectField
                    onClick={handleOnClick}
                    onScroll={handleOnScroll}
                >

and then:

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

        if (hasScrollReachedBottom) {
            handleLoad();
        }
    }

Works excellent:)