react-scroll-horizontal
react-scroll-horizontal copied to clipboard
Is it possible to detect when the user scrolled the entire component till the very end?
I want to execute some code when the user reaches the 'ending' of the horizontal scroll. Is that possible?
Yes! you can find the class into the div created by your scroll horizontal and calculate the scroll width and position.
Follow a scroll example :
const wheel = document.querySelector( ".scroll-horizontal" ) as HTMLDivElement;
if (wheel) {
wheel.addEventListener("wheel", (e) => {
const { deltaY } = e;
const scrollSize = wheel.scrollWidth - wheel.offsetWidth;
if (scrollValue >= scrollSize) {
scrollValue = scrollSize;
return;
}
if (scrollValue < 0) {
scrollValue = 0;
return;
}
if (deltaY > 0) {
scrollValue -= 100;
wheel.scroll(scrollValue, 0);
return;
}
scrollValue += 100;
wheel.scroll(scrollValue, 0);
});
}
The scrollValue corresponding where the scroll are in scrollvalue position.
if (scrollValue >= scrollSize) is the end.