NXT-9810: Added support for scrollend event

packages/ui/useScroll/tests/useScroll-specs.js

@@ -39,16 +39,17 @@ function createMockRefs () {
 				getScrollBounds: jest.fn(() => ({
 					clientWidth: 1920,
 					clientHeight: 1080,
-					scrollWidth: 1000,
-					scrollHeight: 800,
-					maxTop: 200,
-					maxLeft: 200
+					scrollWidth: 2000,      // greater than clientWidth
+					scrollHeight: 2000,     // greater than clientHeight
+					maxTop: 920,            // 2000 - 1080 = 920
+					maxLeft: 80             // 2000 - 1920 = 80
 				})),
 				getMoreInfo: jest.fn(() => ({})),
 				hasDataSizeChanged: false,
 				syncClientSize: jest.fn(() => false),
 				getRtlPositionX: jest.fn((x) => x),
 				calculateMetrics: jest.fn(),
+				didScroll: jest.fn(),
 				props: {}
 			}
 		},
@@ -62,14 +63,16 @@ function createMockRefs () {
 			current: {
 				update: jest.fn(),
 				getContainerRef: jest.fn(() => document.createElement('div')),
-				startHidingScrollbarTrack: jest.fn()
+				startHidingScrollbarTrack: jest.fn(),
+				showScrollbarTrack: jest.fn()
 			}
 		},
 		verticalScrollbarHandle: {
 			current: {
 				update: jest.fn(),
 				getContainerRef: jest.fn(() => document.createElement('div')),
-				startHidingScrollbarTrack: jest.fn()
+				startHidingScrollbarTrack: jest.fn(),
+				showScrollbarTrack: jest.fn()
 			}
 		}
 	};
@@ -347,4 +350,74 @@ describe('useScroll', () => {
 			expect(roundedTargetY).toEqual(80.8);
 		});
 	});
+
+	describe('Native scroll behavior', () => {
+		beforeEach(() => {
+			jest.useFakeTimers();
+			mockPlatform = {chrome: 132};
+			mockRiScale = jest.fn((val) => val);
+		});
+
+		afterEach(() => {
+			jest.runOnlyPendingTimers();
+			jest.useRealTimers();
+		});
+
+		test('should update scroll position from scroll event', () => {
+			const mocks = createMockRefs();
+
+			const props = {
+				direction: 'vertical',
+				scrollMode: 'native',
+				...mocks,
+				assignProperties: jest.fn(),
+				horizontalScrollbar: 'auto',
+				verticalScrollbar: 'auto'
+			};
+
+			renderHook(() => useScrollBase(props));
+
+			const scrollEvent = new Event('scroll');
+			Object.defineProperty(scrollEvent, 'target', {
+				value: {scrollLeft: 50, scrollTop: 150},
+				writable: false
+			});
+
+			// eslint-disable-next-line testing-library/no-unnecessary-act
+			act(() => {
+				fireEvent(mocks.scrollContentRef.current, scrollEvent);
+			});
+
+			expect(mocks.scrollContentHandle.current.didScroll).toHaveBeenCalledWith(50, 150);
+		});
+
+		test('should handle RTL scroll position correctly', () => {
+			const mocks = createMockRefs();
+			mockPlatform = {chrome: 132};
+
+			const props = {
+				direction: 'horizontal',
+				scrollMode: 'native',
+				rtl: true,
+				...mocks,
+				assignProperties: jest.fn(),
+				horizontalScrollbar: 'auto',
+				verticalScrollbar: 'auto'
+			};
+
+			renderHook(() => useScrollBase(props));
+
+			const scrollEvent = new Event('scroll');
+			Object.defineProperty(scrollEvent, 'target', {
+				value: {scrollLeft: -50, scrollTop: 0}
+			});
+
+			// eslint-disable-next-line testing-library/no-unnecessary-act
+			act(() => {
+				fireEvent(mocks.scrollContentRef.current, scrollEvent);
+			});
+
+			expect(mocks.scrollContentHandle.current.didScroll).toHaveBeenCalledWith(50, 0);
+		});
+	});
 });

packages/ui/useScroll/useScroll.js

@@ -182,6 +182,7 @@ const useScrollBase = (props) => {
 
 		// Enable the early bail out of repeated scrolling to the same position
 		animationInfo: null,
+		scrollEndGraceTimer: null,
 
 		resizeRegistry: null,
 
@@ -844,17 +845,20 @@ const useScrollBase = (props) => {
 	// scrollMode 'translate' ]]
 
 	// scrollMode 'native' [[
-	function onScroll (ev) {
+	/**
+	 * Updates scroll position from a scroll event.
+	 * Handles RTL adjustment and position updates.
+	 *
+	 * @param {Event} ev - Scroll event
+	 * @private
+	 */
+	function updateScrollPosition (ev) {
 		let {scrollLeft, scrollTop} = ev.target;
 
 		const
 			bounds = getScrollBounds(),
 			canScrollH = canScrollHorizontally(bounds);
 
-		if (!mutableRef.current.scrolling) {
-			scrollStartOnScroll();
-		}
-
 		if (rtl && canScrollH) {
 			scrollLeft = (platform.chrome < 85) ? bounds.maxLeft - scrollLeft : -scrollLeft;
 		}
@@ -869,9 +873,62 @@ const useScrollBase = (props) => {
 		if (scrollContentHandle.current.didScroll) {
 			scrollContentHandle.current.didScroll(mutableRef.current.scrollLeft, mutableRef.current.scrollTop);
 		}
+	}
+
+	function onScroll (ev) {
+		// Track if we had a grace timer active before clearing it
+		const hadGraceTimer = !!mutableRef.current.scrollEndGraceTimer;
+
+		if (mutableRef.current.scrollEndGraceTimer) {
+			clearTimeout(mutableRef.current.scrollEndGraceTimer);
+			mutableRef.current.scrollEndGraceTimer = null;
+		}
+
+		if (!mutableRef.current.scrolling) {
+			scrollStartOnScroll();
+		}
+
+		updateScrollPosition(ev);
+
+		if (mutableRef.current.lastInputType === 'wheel' && !mutableRef.current.isScrollAnimationTargetAccumulated) {
+			mutableRef.current.isScrollAnimationTargetAccumulated = true;
+		}
 
 		forwardScrollEvent('onScroll');
-		mutableRef.current.scrollStopJob.start();
+
+		if (!hadGraceTimer) {
+			mutableRef.current.scrollStopJob.start();
+		}
+	}
+
+	/*
+	 * Handler for scrollend event
+	 */
+	function onScrollEnd (ev) {
+		if (!mutableRef.current.scrolling) {
+			return;
+		}
+
+		updateScrollPosition(ev);
+
+		// Stop the fallback timer since the native scrollend has fired
+		mutableRef.current.scrollStopJob.stop();
+
+		// stop for non-accumulating scrolls (mouse/touch)
+		if (!mutableRef.current.isScrollAnimationTargetAccumulated) {
+			scrollStopOnScroll();
+			return;
+		}
+
+		// This prevents spamming onScrollStop during smooth scroll continuation
+		if (mutableRef.current.scrollEndGraceTimer) {
+			clearTimeout(mutableRef.current.scrollEndGraceTimer);
+		}
+
+		mutableRef.current.scrollEndGraceTimer = setTimeout(() => {
+			mutableRef.current.scrollEndGraceTimer = null;
+			scrollStopOnScroll();
+		}, 100);
 	}
 	// scrollMode 'native' ]]
 
@@ -1553,6 +1610,7 @@ const useScrollBase = (props) => {
 		// scrollMode 'native' [[
 		if (scrollMode === 'native' && scrollContentRef.current) {
 			utilEvent('scroll').addEventListener(scrollContentRef, onScroll, {passive: true});
+			utilEvent('scrollend').addEventListener(scrollContentRef, onScrollEnd);
 		}
 		// scrollMode 'native' ]]
 
@@ -1574,6 +1632,7 @@ const useScrollBase = (props) => {
 
 		// scrollMode 'native' [[
 		utilEvent('scroll').removeEventListener(scrollContentRef, onScroll, {passive: true});
+		utilEvent('scrollend').removeEventListener(scrollContentRef, onScrollEnd);
 		// scrollMode 'native' ]]
 
 		if (props.removeEventListeners) {

packages/ui/useScroll/utilEvent.js

@@ -1,10 +1,28 @@
 // A `React.useEvent` hooks is introduced in https://github.com/facebook/react/pull/17651
 // The `useEvent` below will be replaced with the `React.useEvent` later.
+
+/*
+ * Detects if the browser natively supports the scrollend event.
+ */
+const supportsScrollEnd = () => {
+	if (typeof window === 'undefined') {
+		return false;
+	}
+	return 'onscrollend' in window;
+};
+
 const utilEvent = (eventName) => {
+	const isScrollEndEvent = eventName === 'scrollend';
+	const hasNativeScrollEnd = isScrollEndEvent && supportsScrollEnd();
+
 	return {
 		addEventListener (ref, fn, param) {
 			if (!ref) return;
 
+			if (isScrollEndEvent && !hasNativeScrollEnd) {
+				return;
+			}
+
 			if (typeof window !== 'undefined' && (ref === window || ref === document)) {
 				ref.addEventListener(eventName, fn, param);
 			} else if (ref.current) {
@@ -17,6 +35,10 @@ const utilEvent = (eventName) => {
 		removeEventListener (ref, fn, param) {
 			if (!ref) return;
 
+			if (isScrollEndEvent && !hasNativeScrollEnd) {
+				return;
+			}
+
 			if (typeof window !== 'undefined' && (ref === window || ref === document)) {
 				ref.removeEventListener(eventName, fn, param);
 			} else if (ref.current) {