fix: modify scroll bar size (#252)

* fix: modify scroll bar size

* test: modify test case

---------

Co-authored-by: 二货机器人 <[email protected]>

Author: linxianxi

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}

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 = {

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);
 }

tests/scroll.test.js

@@ -470,7 +470,7 @@ describe('List.Scroll', () => {
     });
 
     expect(container.querySelector('.rc-virtual-list-scrollbar-thumb')).toHaveStyle({
-      height: `10px`,
+      height: `20px`,
     });
   });
 });