chore: Remeasure when scroll miss target real size

Author: zombieJ

examples/basic.tsx

@@ -12,7 +12,8 @@ const MyItem: React.FC<Item> = ({ id }, ref) => (
     style={{
       border: '1px solid gray',
       padding: '0 16px',
-      height: 30 + (id % 2 ? 0 : 10),
+      // height: 30 + (id % 2 ? 0 : 10),
+      height: 32,
       lineHeight: '30px',
       boxSizing: 'border-box',
       display: 'inline-block',
@@ -33,7 +34,7 @@ class TestItem extends React.Component<Item, {}> {
 }
 
 const data: Item[] = [];
-for (let i = 0; i < 100; i += 1) {
+for (let i = 0; i < 200; i += 1) {
   data.push({
     id: String(i),
   });
@@ -46,14 +47,14 @@ const TYPES = [
 
 const Demo = () => {
   const [destroy, setDestroy] = React.useState(false);
-  const [visible, setVisible] = React.useState(true);
+  const [visible, setVisible] = React.useState(false);
   const [type, setType] = React.useState('dom');
   const listRef = React.useRef<ListRef>(null);
 
   React.useEffect(() => {
     if (visible) {
       listRef.current.scrollTo({
-        index: 50,
+        index: 100,
       });
     }
   }, [visible]);
@@ -156,7 +157,7 @@ const Demo = () => {
             ref={listRef}
             data={data}
             height={200}
-            itemHeight={30}
+            itemHeight={20}
             itemKey="id"
             style={{
               border: '1px solid red',

src/List.tsx

@@ -199,7 +199,14 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   }, [inVirtual]);
 
   // ================================= Ref ==================================
-  const scrollTo = useScrollTo<T>(componentRef, mergedData, height, heights, itemHeight, getKey);
+  const scrollTo = useScrollTo<T>(
+    componentRef,
+    mergedData,
+    heights,
+    itemHeight,
+    getKey,
+    collectHeight,
+  );
 
   React.useImperativeHandle(ref, () => ({
     scrollTo,

src/hooks/useScrollTo.tsx

@@ -7,10 +7,10 @@ import { GetKey } from '../interface';
 export default function useScrollTo<T>(
   containerRef: React.RefObject<HTMLDivElement>,
   data: T[],
-  height: number,
   heights: Map<React.Key, number>,
   itemHeight: number,
   getKey: GetKey<T>,
+  collectHeight: () => void,
 ): ScrollTo {
   const scrollRef = React.useRef<number>();
 
@@ -30,13 +30,17 @@ export default function useScrollTo<T>(
       }
 
       // We will retry 3 times in case dynamic height shaking
-      const syncScroll = (times = 3) => {
+      const syncScroll = (times: number, targetAlign?: 'top' | 'bottom') => {
         if (times < 0 || !containerRef.current) return;
 
+        const height = containerRef.current.clientHeight;
+        const mergedAlign = targetAlign || align;
+
         // Get top & bottom
         let stackTop = 0;
         let itemTop = 0;
         let itemBottom = 0;
+        let needCollectHeight = false;
 
         for (let i = 0; i <= index; i += 1) {
           const key = getKey(data[i]);
@@ -45,34 +49,49 @@ export default function useScrollTo<T>(
           itemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight);
 
           stackTop = itemBottom;
+
+          if (i === index && cacheHeight === undefined) {
+            needCollectHeight = true;
+          }
         }
 
         // Scroll to
-        switch (align) {
+        let targetTop: number | null = null;
+        let newTargetAlign: 'top' | 'bottom' | null = targetAlign;
+
+        switch (mergedAlign) {
           case 'top':
-            containerRef.current.scrollTop = itemTop;
+            targetTop = itemTop;
             break;
           case 'bottom':
-            containerRef.current.scrollTop = itemBottom - height;
+            targetTop = itemBottom - height;
             break;
 
           default: {
             const { scrollTop } = containerRef.current;
             const scrollBottom = scrollTop + height;
             if (itemTop < scrollTop) {
-              containerRef.current.scrollTop = itemTop;
+              newTargetAlign = 'top';
             } else if (itemBottom > scrollBottom) {
-              containerRef.current.scrollTop = itemBottom - height;
+              newTargetAlign = 'bottom';
             }
           }
         }
 
+        if (targetTop !== null && targetTop !== containerRef.current.scrollTop) {
+          containerRef.current.scrollTop = targetTop;
+        }
+
+        // We will retry since element may not sync height as it described
         scrollRef.current = raf(() => {
-          syncScroll(times - 1);
+          if (needCollectHeight) {
+            collectHeight();
+          }
+          syncScroll(times - 1, newTargetAlign);
         });
       };
 
-      syncScroll();
+      syncScroll(3);
     }
   };
 }

tests/scroll.test.js

@@ -15,6 +15,9 @@ describe('List.Scroll', () => {
       offsetHeight: {
         get: () => 20,
       },
+      clientHeight: {
+        get: () => 100,
+      },
     });
   });