Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions src/List.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import type { ExtraRenderInfo, GetKey, RenderFunc, SharedConfig } from './interf
import type { ScrollBarDirectionType, ScrollBarRef } from './ScrollBar';
import ScrollBar from './ScrollBar';
import { getSpinSize } from './utils/scrollbarUtil';
import { debounce } from './utils/debounce';

const EMPTY_DATA = [];

Expand Down Expand Up @@ -271,10 +272,15 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
rangeRef.current.start = start;
rangeRef.current.end = end;

const isScrollingRef = useRef(false);
// 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(() => {
// When the `scrollHeight` change is not caused by scrolling,
// end the function execution avoiding table jitter caused by changes in the first row
if (!isScrollingRef.current) return;

const changedRecord = heights.getRecord();
if (changedRecord.size === 1) {
const recordKey = Array.from(changedRecord)[0];
Expand Down Expand Up @@ -377,6 +383,9 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
}
}

const toggleScrollStatus = React.useCallback(debounce(() => {
isScrollingRef.current = false;
}, 100), []);
// When data size reduce. It may trigger native scroll event back to fit scroll position
function onFallbackScroll(e: React.UIEvent<HTMLDivElement>) {
const { scrollTop: newScrollTop } = e.currentTarget;
Expand All @@ -387,6 +396,10 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
// Trigger origin onScroll
onScroll?.(e);
triggerScroll();
// Set the scroll status to `true`
isScrollingRef.current = true;
// Set the scroll status to `false` after scrolling ends
toggleScrollStatus();
}

const keepInHorizontalRange = (nextOffsetLeft: number) => {
Expand Down
10 changes: 10 additions & 0 deletions src/utils/debounce.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export function debounce(fn: (...args) => void, delay: number = 300) {
let timer;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, delay);
}
}
Loading