@wordpress/dataviews 17.1.0 → 17.1.2-next.v.202607070741.0

package/src/hooks/use-infinite-scroll.ts

@@ -28,6 +28,7 @@ function captureAnchorElement(
 	anchorElementRef: React.MutableRefObject< {
 		posinset: number;
 		viewportOffset: number;
+		scrollTop: number;
 		direction: 'up' | 'down' | null;
 	} | null >,
 	direction: 'up' | 'down'
@@ -61,6 +62,7 @@ function captureAnchorElement(
 	anchorElementRef.current = {
 		posinset,
 		viewportOffset: anchorRect.top - containerRect.top,
+		scrollTop: container.scrollTop,
 		direction,
 	};
 	return true;
@@ -95,6 +97,7 @@ export function useInfiniteScroll( {
 	const anchorElementRef = useRef< {
 		posinset: number;
 		viewportOffset: number;
+		scrollTop: number;
 		direction: 'up' | 'down' | null;
 	} | null >( null );
 	const viewRef = useRef( view );
@@ -174,8 +177,13 @@ export function useInfiniteScroll( {
 			const anchorRect = anchorElement.getBoundingClientRect();
 			const currentOffset = anchorRect.top - containerRect.top;
 
-			// Calculate how much the anchor has moved and adjust scroll to compensate
-			const scrollAdjustment = currentOffset - anchor.viewportOffset;
+			// Compensate only for the content shift, not for scrolling the user
+			// did during an async load. Adding back the scroll delta since capture
+			// keeps the list from snapping back to the capture-time position.
+			const scrollAdjustment =
+				currentOffset -
+				anchor.viewportOffset +
+				( container.scrollTop - anchor.scrollTop );
 
 			if ( Math.abs( scrollAdjustment ) > 1 ) {
 				container.scrollTop += scrollAdjustment;