fix: Adjust the top height of the proxy to solve the sliding issue (#1310) (#1313)

Author: Wxh16144

src/VirtualTable/BodyGrid.tsx

@@ -104,6 +104,17 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
       },
     });
 
+    // https://github.com/ant-design/ant-design/issues/54734
+    Object.defineProperty(obj, 'scrollTop', {
+      get: () => listRef.current?.getScrollInfo().y || 0,
+
+      set: (value: number) => {
+        listRef.current?.scrollTo({
+          top: value,
+        });
+      },
+    });
+
     return obj;
   });
 

tests/Virtual.spec.tsx

@@ -6,7 +6,10 @@ import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import { VirtualTable, type Reference, type VirtualTableProps } from '../src';
 
+const identity = (value: any) => value;
+
 global.scrollToConfig = null;
+global.collectGetScrollInfoReturn = identity;
 
 vi.mock('rc-virtual-list', async () => {
   const RealVirtualList = ((await vi.importActual('rc-virtual-list')) as any).default;
@@ -20,6 +23,10 @@ vi.mock('rc-virtual-list', async () => {
         global.scrollToConfig = config;
         return myRef.current.scrollTo(config);
       },
+      getScrollInfo: () => {
+        const originResult = myRef.current.getScrollInfo();
+        return global.collectGetScrollInfoReturn(originResult);
+      },
     }));
 
     return <RealVirtualList ref={myRef} {...props} data-scroll-width={props.scrollWidth} />;
@@ -59,7 +66,8 @@ describe('Table.Virtual', () => {
   beforeEach(() => {
     scrollLeftCalled = false;
     setScrollLeft.mockReset();
-    global.scrollToConfig = null;
+    global.scrollToConfig = vi.fn(identity);
+    // global.collectGetScrollInfoReturn.mockReset();
     vi.useFakeTimers();
     resetWarned();
   });
@@ -606,4 +614,26 @@ describe('Table.Virtual', () => {
       expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-end-shadow-show');
     });
   });
+
+  /**
+   * In antd, we need to call the scrollTop method through ref to achieve scrolling.
+   * see: https://github.com/ant-design/ant-design/issues/54734
+   */
+  it('should get and set scrollTop correctly', async () => {
+    const ref = React.createRef<any>();
+
+    global.collectGetScrollInfoReturn = (origin: any) => ({
+      ...origin,
+      y: 50,
+    });
+
+    getTable({ internalRefs: { body: ref } });
+
+    expect(ref.current.scrollTop).toBe(50);
+
+    ref.current.scrollTop = 200;
+    expect(global.scrollToConfig).toEqual({
+      top: 200,
+    });
+  });
 });