fix: should check sticky scroll bar visible when table height changed (…

…#1076)

* fix: should check sticky scroll bar visible when table height changed

* chore: use rc-resize-observer

* chore: remove ResizeObserver

* chore: update

src/Table.tsx

@@ -706,6 +706,7 @@ function Table<RecordType extends DefaultRecordType>(
             scrollBodyRef={scrollBodyRef}
             onScroll={onScroll}
             container={container}
+            data={data}
           />
         )}
       </>

src/stickyScrollBar.tsx

@@ -12,10 +12,11 @@ interface StickyScrollBarProps {
   onScroll: (params: { scrollLeft?: number }) => void;
   offsetScroll: number;
   container: HTMLElement | Window;
+  data?: readonly any[];
 }
 
 const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarProps> = (
-  { scrollBodyRef, onScroll, offsetScroll, container },
+  { scrollBodyRef, onScroll, offsetScroll, container, data },
   ref,
 ) => {
   const prefixCls = useContext(TableContext, 'prefixCls');
@@ -80,7 +81,7 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
     refState.current.x = event.pageX;
   };
 
-  const onContainerScroll = () => {
+  const checkScrollBarVisible = () => {
     if (!scrollBodyRef.current) {
       return;
     }
@@ -123,16 +124,16 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
   React.useEffect(() => {
     const onMouseUpListener = addEventListener(document.body, 'mouseup', onMouseUp, false);
     const onMouseMoveListener = addEventListener(document.body, 'mousemove', onMouseMove, false);
-    onContainerScroll();
+    checkScrollBarVisible();
     return () => {
       onMouseUpListener.remove();
       onMouseMoveListener.remove();
     };
   }, [scrollBarWidth, isActive]);
 
   React.useEffect(() => {
-    const onScrollListener = addEventListener(container, 'scroll', onContainerScroll, false);
-    const onResizeListener = addEventListener(window, 'resize', onContainerScroll, false);
+    const onScrollListener = addEventListener(container, 'scroll', checkScrollBarVisible, false);
+    const onResizeListener = addEventListener(window, 'resize', checkScrollBarVisible, false);
 
     return () => {
       onScrollListener.remove();
@@ -155,6 +156,11 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
     }
   }, [scrollState.isHiddenScrollBar]);
 
+  // The best way is to use ResizeObserver to detect the body height, but this way is enough
+  React.useEffect(() => {
+    checkScrollBarVisible();
+  }, [data]);
+
   if (bodyScrollWidth <= bodyWidth || !scrollBarWidth || scrollState.isHiddenScrollBar) {
     return null;
   }