fix: not force fill auto (#508)

Author: zombieJ

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>

src/getScrollBarSize.tsx

@@ -36,25 +36,31 @@ 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) {
       // Can't wrap, just log error
       console.error(e);
 
       // Get from style directly
-      fallbackWidth = parseInt(webkitScrollbarStyle.width, 10);
-      fallbackHeight = parseInt(webkitScrollbarStyle.height, 10);
+      fallbackWidth = width;
+      fallbackHeight = height;
     }
   }