From 508bd9c7619b0ceba9378bc6824399afcdce907f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 7 Mar 2024 15:32:09 +0800
Subject: [PATCH] fix: not force fill auto

---
 docs/examples/getScrollBarSize.tsx |  6 +++++-
 src/getScrollBarSize.tsx           | 20 +++++++++++++-------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/docs/examples/getScrollBarSize.tsx b/docs/examples/getScrollBarSize.tsx
index 7249a594..5e34da58 100644
--- a/docs/examples/getScrollBarSize.tsx
+++ b/docs/examples/getScrollBarSize.tsx
@@ -22,20 +22,23 @@ const cssText = `
 `;
 
 export default () => {
+  const defaultRef = React.useRef<HTMLDivElement>();
   const webkitRef = React.useRef<HTMLDivElement>();
   const scrollRef = React.useRef<HTMLDivElement>();
   const [sizeData, setSizeData] = React.useState('');
 
   React.useEffect(() => {
     const originSize = getScrollBarSize();
+    const defaultSize = getTargetScrollBarSize(defaultRef.current);
     const webkitSize = getTargetScrollBarSize(webkitRef.current);
     const scrollSize = getTargetScrollBarSize(scrollRef.current);
 
     setSizeData(
       [
         `Origin: ${originSize}`,
+        `Default: ${defaultSize.width}/${defaultSize.height}`,
         `Webkit: ${webkitSize.width}/${webkitSize.height}`,
-        `Webkit: ${scrollSize.width}/${scrollSize.height}`,
+        `Scroll: ${scrollSize.width}/${scrollSize.height}`,
       ].join(', '),
     );
   }, []);
@@ -55,6 +58,7 @@ export default () => {
           overflow: 'scroll',
           background: 'yellow',
         }}
+        ref={defaultRef}
       >
         Origin
       </div>
diff --git a/src/getScrollBarSize.tsx b/src/getScrollBarSize.tsx
index 05cbb9a4..77092c06 100644
--- a/src/getScrollBarSize.tsx
+++ b/src/getScrollBarSize.tsx
@@ -36,16 +36,22 @@ function measureScrollbarSize(ele?: HTMLElement): ScrollBarSize {
 
     // Set Webkit style
     const webkitScrollbarStyle = getComputedStyle(ele, '::-webkit-scrollbar');
+    const width = parseInt(webkitScrollbarStyle.width, 10);
+    const height = parseInt(webkitScrollbarStyle.height, 10);
 
     // Try wrap to handle CSP case
     try {
+      const widthStyle = width ? `width: ${webkitScrollbarStyle.width};` : '';
+      const heightStyle = height
+        ? `height: ${webkitScrollbarStyle.height};`
+        : '';
+
       updateCSS(
         `
-     #${randomId}::-webkit-scrollbar {
-        width: ${webkitScrollbarStyle.width};
-        height: ${webkitScrollbarStyle.height};
-     }
-    `,
+#${randomId}::-webkit-scrollbar {
+${widthStyle}
+${heightStyle}
+}`,
         randomId,
       );
     } catch (e) {
@@ -53,8 +59,8 @@ function measureScrollbarSize(ele?: HTMLElement): ScrollBarSize {
       console.error(e);
 
       // Get from style directly
-      fallbackWidth = parseInt(webkitScrollbarStyle.width, 10);
-      fallbackHeight = parseInt(webkitScrollbarStyle.height, 10);
+      fallbackWidth = width;
+      fallbackHeight = height;
     }
   }