fix: modify scroll bar size (#252)

* fix: modify scroll bar size * test: modify test case --------- Co-authored-by: 二货机器人 <[email protected]>
react-component · Feb 1, 2024 · edfac3e · edfac3e
1 parent 2d4aef8
commit edfac3e
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 9 deletions.
diff --git a/src/List.tsx b/src/List.tsx
@@ -576,7 +576,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
         />
       )}
 
-      {inVirtual && scrollWidth && (
+      {inVirtual && scrollWidth > size.width && (
         <ScrollBar
           ref={horizontalScrollBarRef}
           prefixCls={prefixCls}

diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx
@@ -74,9 +74,6 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
   const enableScrollRange = scrollRange - containerSize || 0;
   const enableOffsetRange = containerSize - spinSize || 0;
 
-  // `scrollWidth` < `clientWidth` means no need to show scrollbar
-  const canScroll = enableScrollRange > 0;
-
   // ========================= Top ==========================
   const top = React.useMemo(() => {
     if (scrollOffset === 0 || enableScrollRange === 0) {
@@ -87,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();
   };
@@ -206,7 +203,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
 
   const containerStyle: React.CSSProperties = {
     position: 'absolute',
-    visibility: visible && canScroll ? null : 'hidden',
+    visibility: visible ? null : 'hidden',
   };
 
   const thumbStyle: React.CSSProperties = {

diff --git a/src/utils/scrollbarUtil.ts b/src/utils/scrollbarUtil.ts
@@ -1,11 +1,10 @@
 const MIN_SIZE = 20;
 
 export function getSpinSize(containerSize = 0, scrollRange = 0) {
-  let baseSize = (containerSize / scrollRange) * 100;
+  let baseSize = (containerSize / scrollRange) * containerSize;
   if (isNaN(baseSize)) {
     baseSize = 0;
   }
   baseSize = Math.max(baseSize, MIN_SIZE);
-  baseSize = Math.min(baseSize, containerSize / 2);
   return Math.floor(baseSize);
 }
diff --git a/tests/scroll.test.js b/tests/scroll.test.js
@@ -470,7 +470,7 @@ describe('List.Scroll', () => {
     });
 
     expect(container.querySelector('.rc-virtual-list-scrollbar-thumb')).toHaveStyle({
-      height: `10px`,
+      height: `20px`,
     });
   });
 });