react-scroll-horizontal icon indicating copy to clipboard operation
react-scroll-horizontal copied to clipboard

Is it possible to detect when the user scrolled the entire component till the very end?

Open athosfranco opened this issue 3 years ago • 1 comments

I want to execute some code when the user reaches the 'ending' of the horizontal scroll. Is that possible?

athosfranco avatar Mar 28 '22 15:03 athosfranco

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.

SafraPC avatar Aug 27 '22 00:08 SafraPC