From 4c492cfa1f5880eb6dc0386eacc52439fa27f5be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Thu, 13 Jun 2024 14:59:03 +0800
Subject: [PATCH] fix: VirtualList scale scrollbar not work as expect (#278)

* chore: fix scale

* test: fix test case
---
 src/List.tsx               |  4 ++--
 src/ScrollBar.tsx          |  8 +++++---
 tests/scrollWidth.test.tsx | 27 +++++++++++++++++++++------
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/List.tsx b/src/List.tsx
index ad1f4b3..6a5c751 100644
--- 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
index a0ab734..01b9d69 100644
--- 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
index 5757b89..b1f8fd1 100644
--- 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, {