fix: VirtualList scale scrollbar not work as expect (#278)

* chore: fix scale * test: fix test case
react-component · Jun 13, 2024 · 4c492cf · 4c492cf
1 parent 645b5a0
commit 4c492cf
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/src/List.tsx b/src/List.tsx
@@ -275,8 +275,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   const onHolderResize: ResizeObserverProps['onResize'] = (sizeInfo) => {
     setSize({
-      width: sizeInfo.width || sizeInfo.offsetWidth,
-      height: sizeInfo.height || sizeInfo.offsetHeight,
+      width: sizeInfo.offsetWidth,
+      height: sizeInfo.offsetHeight,
     });
   };
 

diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import raf from 'rc-util/lib/raf';
+import * as React from 'react';
 
 export type ScrollBarDirectionType = 'ltr' | 'rtl';
 
@@ -84,7 +84,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
   }, [scrollOffset, enableScrollRange, enableOffsetRange]);
 
   // ====================== Container =======================
-  const onContainerMouseDown: React.MouseEventHandler = e => {
+  const onContainerMouseDown: React.MouseEventHandler = (e) => {
     e.stopPropagation();
     e.preventDefault();
   };
@@ -142,8 +142,10 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
         } = stateRef.current;
         raf.cancel(moveRafId);
 
+        const scale = containerSize / scrollbarRef.current.getBoundingClientRect().height;
+
         if (stateDragging) {
-          const offset = getPageXY(e, horizontal) - statePageY;
+          const offset = (getPageXY(e, horizontal) - statePageY) * scale;
           let newTop = stateStartTop;
 
           if (!isLTR && horizontal) {

diff --git a/tests/scrollWidth.test.tsx b/tests/scrollWidth.test.tsx
@@ -17,20 +17,35 @@ describe('List.scrollWidth', () => {
   let mockMouseEvent;
   let pageX: number;
 
+  const holderHeight = 100;
   let holderWidth = 100;
 
   beforeAll(() => {
     mockElement = spyElementPrototypes(HTMLElement, {
       offsetHeight: {
-        get: () => ITEM_HEIGHT,
+        get() {
+          if (this.classList.contains('rc-virtual-list-holder')) {
+            return holderHeight;
+          }
+          return ITEM_HEIGHT;
+        },
+      },
+      offsetWidth: {
+        get() {
+          return holderWidth;
+        },
       },
       clientHeight: {
-        get: () => holderWidth,
+        get() {
+          return holderWidth;
+        },
+      },
+      getBoundingClientRect() {
+        return {
+          width: holderWidth,
+          height: holderHeight,
+        };
       },
-      getBoundingClientRect: () => ({
-        width: holderWidth,
-        height: 100,
-      }),
     });
 
     mockMouseEvent = spyElementPrototypes(MouseEvent, {