diff --git a/src/Table.tsx b/src/Table.tsx index 6476e7271..a8c6344f8 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -363,7 +363,10 @@ function Table( const fixColumn = horizonScroll && flattenColumns.some(({ fixed }) => fixed); // Sticky - const stickyRef = React.useRef<{ setScrollLeft: (left: number) => void }>(); + const stickyRef = React.useRef<{ + setScrollLeft: (left: number) => void; + checkScrollBarVisible: () => void; + }>(); const { isSticky, offsetHeader, offsetSummary, offsetScroll, stickyClassName, container } = useSticky(sticky, prefixCls); @@ -486,6 +489,7 @@ function Table( }; const onFullTableResize = ({ width }) => { + stickyRef.current?.checkScrollBarVisible(); let mergedWidth = fullTableRef.current ? fullTableRef.current.offsetWidth : width; if (useInternalHooks && getContainerWidth && fullTableRef.current) { mergedWidth = getContainerWidth(fullTableRef.current, mergedWidth) || mergedWidth; @@ -716,7 +720,6 @@ function Table( scrollBodyRef={scrollBodyRef} onScroll={onInternalScroll} container={container} - data={data} /> )} diff --git a/src/stickyScrollBar.tsx b/src/stickyScrollBar.tsx index e73bea58f..09ab691d0 100644 --- a/src/stickyScrollBar.tsx +++ b/src/stickyScrollBar.tsx @@ -6,17 +6,17 @@ import getScrollBarSize from 'rc-util/lib/getScrollBarSize'; import * as React from 'react'; import TableContext from './context/TableContext'; import { useLayoutState } from './hooks/useFrame'; +import raf from 'rc-util/lib/raf'; interface StickyScrollBarProps { scrollBodyRef: React.RefObject; onScroll: (params: { scrollLeft?: number }) => void; offsetScroll: number; container: HTMLElement | Window; - data?: readonly any[]; } const StickyScrollBar: React.ForwardRefRenderFunction = ( - { scrollBodyRef, onScroll, offsetScroll, container, data }, + { scrollBodyRef, onScroll, offsetScroll, container }, ref, ) => { const prefixCls = useContext(TableContext, 'prefixCls'); @@ -40,6 +40,14 @@ const StickyScrollBar: React.ForwardRefRenderFunction(null); + + React.useEffect( + () => () => { + raf.cancel(rafRef.current); + }, + [], + ); const onMouseUp: React.MouseEventHandler = () => { setActive(false); @@ -82,30 +90,32 @@ const StickyScrollBar: React.ForwardRefRenderFunction { - if (!scrollBodyRef.current) { - return; - } - const tableOffsetTop = getOffset(scrollBodyRef.current).top; - const tableBottomOffset = tableOffsetTop + scrollBodyRef.current.offsetHeight; - const currentClientOffset = - container === window - ? document.documentElement.scrollTop + window.innerHeight - : getOffset(container).top + (container as HTMLElement).clientHeight; - - if ( - tableBottomOffset - getScrollBarSize() <= currentClientOffset || - tableOffsetTop >= currentClientOffset - offsetScroll - ) { - setScrollState(state => ({ - ...state, - isHiddenScrollBar: true, - })); - } else { - setScrollState(state => ({ - ...state, - isHiddenScrollBar: false, - })); - } + rafRef.current = raf(() => { + if (!scrollBodyRef.current) { + return; + } + const tableOffsetTop = getOffset(scrollBodyRef.current).top; + const tableBottomOffset = tableOffsetTop + scrollBodyRef.current.offsetHeight; + const currentClientOffset = + container === window + ? document.documentElement.scrollTop + window.innerHeight + : getOffset(container).top + (container as HTMLElement).clientHeight; + + if ( + tableBottomOffset - getScrollBarSize() <= currentClientOffset || + tableOffsetTop >= currentClientOffset - offsetScroll + ) { + setScrollState(state => ({ + ...state, + isHiddenScrollBar: true, + })); + } else { + setScrollState(state => ({ + ...state, + isHiddenScrollBar: false, + })); + } + }); }; const setScrollLeft = (left: number) => { @@ -119,6 +129,7 @@ const StickyScrollBar: React.ForwardRefRenderFunction ({ setScrollLeft, + checkScrollBarVisible, })); React.useEffect(() => { @@ -156,11 +167,6 @@ const StickyScrollBar: React.ForwardRefRenderFunction { - checkScrollBarVisible(); - }, [data]); - if (bodyScrollWidth <= bodyWidth || !scrollBarWidth || scrollState.isHiddenScrollBar) { return null; }