diff --git a/src/List.tsx b/src/List.tsx index d403a96..95b4681 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -271,10 +271,10 @@ export function RawList(props: ListProps, ref: React.Ref) { rangeRef.current.start = start; rangeRef.current.end = end; + // When scroll up, first visible item get real height may not same as `itemHeight`, + // Which will make scroll jump. + // Let's sync scroll top to avoid jump React.useLayoutEffect(() => { - console.log('>>>> offsetTop', offsetTop); - console.log('>>>>', scrollHeight, start, end, heights.getRecord()); - const changedRecord = heights.getRecord(); if (changedRecord.size === 1) { const recordKey = Array.from(changedRecord)[0]; @@ -283,7 +283,6 @@ export function RawList(props: ListProps, ref: React.Ref) { const realStartHeight = heights.get(recordKey); const diffHeight = realStartHeight - itemHeight; syncScrollTop((ori) => { - console.log('-->', diffHeight, ori); return ori + diffHeight; }); } diff --git a/src/hooks/useHeights.tsx b/src/hooks/useHeights.tsx index 6ab1881..b4c6955 100644 --- a/src/hooks/useHeights.tsx +++ b/src/hooks/useHeights.tsx @@ -1,5 +1,4 @@ import findDOMNode from 'rc-util/lib/Dom/findDOMNode'; -import raf from 'rc-util/lib/raf'; import * as React from 'react'; import { useEffect, useRef } from 'react'; import type { GetKey } from '../interface'; @@ -23,10 +22,11 @@ export default function useHeights( const [updatedMark, setUpdatedMark] = React.useState(0); const instanceRef = useRef(new Map()); const heightsRef = useRef(new CacheMap()); - const collectRafRef = useRef(); + + const promiseIdRef = useRef(0); function cancelRaf() { - raf.cancel(collectRafRef.current); + promiseIdRef.current += 1; } function collectHeight(sync = false) { @@ -56,7 +56,13 @@ export default function useHeights( if (sync) { doCollect(); } else { - collectRafRef.current = raf(doCollect); + promiseIdRef.current += 1; + const id = promiseIdRef.current; + Promise.resolve().then(() => { + if (id === promiseIdRef.current) { + doCollect(); + } + }); } }