Improve accuracy of imperative scrolling

src/core/scroller.ts

@@ -5,7 +5,6 @@ import {
  ScrollJump,
  VirtualStore,
  SCROLL_STOP,
- calcTotalJump,
  ACTION_SCROLL_DIRECTION_CHANGE,
  SCROLL_MANUAL,
 } from "./store";
@@ -16,7 +15,7 @@ export type Scroller = {
  _getActualScrollSize: () => number;
  _scrollTo: (offset: number) => void;
  _scrollToIndex: (index: number, count: number) => void;
- _fixScrollJump: (jump: ScrollJump, startIndex: number) => void;
+ _fixScrollJump: (jump: ScrollJump) => void;
 };
 
 export const createScroller = (
@@ -160,42 +159,8 @@ export const createScroller = (
 
  scrollManually(index, () => store._getItemOffset(index));
  },
- _fixScrollJump: ([jump, isManual], startIndex) => {
- // Compensate scroll jump
- if (isManual) {
- const offset = store._getScrollOffset();
- if (offset === 0) {
- // Do nothing to stick to the start
- } else {
- const allDiff = calcTotalJump(jump);
- if (
- store._getScrollSize() -
- (offset + store._getViewportSize() + allDiff) <=
- 0
- ) {
- // Keep end to stick to the end
- if (allDiff) {
- scrollTo(offset + allDiff);
- }
- } else {
- // Keep start at mid
- const diff = jump.reduce((acc, [j, index]) => {
- if (index < startIndex) {
- acc += j;
- }
- return acc;
- }, 0);
- if (diff) {
- scrollTo(diff, true);
- }
- }
- }
- } else {
- const diff = calcTotalJump(jump);
- if (diff) {
- scrollTo(diff, true);
- }
- }
+ _fixScrollJump: (jump) => {
+ scrollTo(jump, true);
  },
  };
 };

src/core/store.ts

@@ -15,12 +15,17 @@ import type { Writeable } from "./types";
 import { abs, exists, max } from "./utils";
 
 type ItemJump = Readonly<[sizeDiff: number, index: number]>;
-export type ScrollJump = Readonly<[jumps: ItemJump[], isManual: boolean]>;
+export type ScrollJump = Readonly<number>;
 export type ItemResize = Readonly<[index: number, size: number]>;
 type ItemsRange = Readonly<[startIndex: number, endIndex: number]>;
 
-export const calcTotalJump = (jump: ItemJump[]): number =>
+const sumJumps = (jump: readonly ItemJump[]): number =>
  jump.reduce((acc, [j]) => acc + j, 0);
+const calculateJumps = (cache: Cache, items: ItemResize[]): ItemJump[] => {
+ return items.map(([index, size]) => {
+ return [size - getItemSize(cache, index), index];
+ });
+};
 
 export const SCROLL_STOP = 0;
 export const SCROLL_DOWN = 1;
@@ -209,35 +214,52 @@ export const createVirtualStore = (
  break;
  }
 
- let isNewItemMeasured = false;
+ let diff = 0;
  // Calculate jump
- const updatedJump: ItemJump[] = [];
+ if (_scrollDirection === SCROLL_UP) {
+ diff = sumJumps(calculateJumps(cache, updated));
+ } else if (_scrollDirection === SCROLL_MANUAL) {
+ const allJumps = calculateJumps(cache, updated);
+ const [startIndex] = _prevRange;
+
+ if (scrollOffset === 0) {
+ // Do nothing to stick to the start
+ } else if (getScrollSize() <= scrollOffset + viewportSize) {
+ // Keep end to stick to the end
+ diff = sumJumps(allJumps);
+ } else {
+ // Keep start at mid
+ diff = sumJumps(
+ allJumps.filter(([, index]) => index < startIndex)
+ );
+ }
+ } else {
+ // Do nothing
+ }
+
+ if (diff) {
+ jump = diff;
+ jumpCount++;
+ }
+
+ // Update item sizes
+ let isNewItemMeasured = false;
  updated.forEach(([index, size]) => {
- updatedJump.push([size - getItemSize(cache, index), index]);
  if (setItemSize(cache as Writeable<Cache>, index, size)) {
  isNewItemMeasured = true;
  }
  });
 
+ // Estimate initial item size from measured sizes
  if (
  shouldAutoEstimateItemSize &&
  isNewItemMeasured &&
  // TODO support reverse scroll also
  !scrollOffset
  ) {
- // Estimate initial item size from measured sizes
  estimateDefaultItemSize(cache as Writeable<Cache>);
  }
 
- if (
- _scrollDirection === SCROLL_MANUAL ||
- _scrollDirection === SCROLL_UP
- ) {
- jump = [updatedJump, _scrollDirection === SCROLL_MANUAL];
- jumpCount++;
- } else {
- // Do nothing
- }
  _resized = shouldSync = mutated = true;
  break;
  }

src/react/VGrid.tsx

@@ -357,13 +357,13 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
  const jump = vStore._flushJump();
  if (!jump) return;
 
- vScroller._fixScrollJump(jump, startRowIndex);
+ vScroller._fixScrollJump(jump);
  }, [vJumpCount]);
  useIsomorphicLayoutEffect(() => {
  const jump = hStore._flushJump();
  if (!jump) return;
 
- hScroller._fixScrollJump(jump, startColIndex);
+ hScroller._fixScrollJump(jump);
  }, [hJumpCount]);
 
  useImperativeHandle(

src/react/VList.tsx

@@ -348,7 +348,7 @@ export const VList = forwardRef<VListHandle, VListProps>(
  const jump = store._flushJump();
  if (!jump) return;
 
- scroller._fixScrollJump(jump, startIndex);
+ scroller._fixScrollJump(jump);
  }, [jumpCount]);
 
  useEffect(() => {