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?
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
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:)