fix(useAffix): enhance scroll handling for both horizontal and vertical page scrolls

Author: RylanBot

packages/components/table/hooks/useAffix.ts

@@ -13,6 +13,7 @@ export default function useAffix(props: TdBaseTableProps, { showElement }: { sho
   const tableContentRef = useRef<HTMLDivElement>(null);
   const lastTableScrollLeftRef = useRef<number>(0);
   const lastPageScrollLeftRef = useRef<number>(0);
+  const lastPageScrollTopRef = useRef<number>(0);
 
   // 吸顶表头
   const affixHeaderRef = useRef<HTMLDivElement>(null);
@@ -68,25 +69,42 @@ export default function useAffix(props: TdBaseTableProps, { showElement }: { sho
   };
 
   const onPageHorizontalScroll = () => {
-    if (!isAffixed || !props.fixedRows?.length) return;
+    if (!isAffixed) return;
 
     const pageScrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
-    if (lastPageScrollLeftRef.current === pageScrollLeft) return;
-    lastPageScrollLeftRef.current = pageScrollLeft;
+    const pageScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+
+    if (lastPageScrollLeftRef.current !== pageScrollLeft) {
+      lastPageScrollLeftRef.current = pageScrollLeft;
 
-    const toUpdateScrollElement = [affixHeaderRef.current, affixFooterRef.current, horizontalScrollbarRef.current];
-    toUpdateScrollElement.forEach((element) => {
-      if (element) {
+      const toUpdateScrollElement = [affixHeaderRef.current, affixFooterRef.current, horizontalScrollbarRef.current];
+      toUpdateScrollElement.forEach((el) => {
+        if (!el) return;
         // 固定行会使用绝对定位，吸顶表头的位置计算需要考虑页面级别的滚动偏移
-        if (props.fixedRows.length) {
+        if (pageScrollLeft) {
           // eslint-disable-next-line no-param-reassign
-          element.style.marginLeft = `-${pageScrollLeft}px`;
-        } else if (element.style.marginLeft) {
+          el.style.marginLeft = `-${pageScrollLeft}px`;
+        } else if (el.style.marginLeft) {
           // eslint-disable-next-line no-param-reassign
-          element.style.marginLeft = '';
+          el.style.marginLeft = '';
         }
-      }
-    });
+      });
+    }
+
+    if (lastPageScrollTopRef.current !== pageScrollTop) {
+      lastPageScrollTopRef.current = pageScrollTop;
+      const toUpdateScrollElement = [affixHeaderRef.current, affixFooterRef.current];
+      toUpdateScrollElement.forEach((el) => {
+        if (!el) return;
+        if (pageScrollTop) {
+          // eslint-disable-next-line no-param-reassign
+          el.style.marginTop = `-${pageScrollTop}px`;
+        } else if (el.style.marginTop) {
+          // eslint-disable-next-line no-param-reassign
+          el.style.marginTop = '';
+        }
+      });
+    }
   };
 
   // 吸底的元素（footer、横向滚动条、分页器）是否显示