From 86a5c73d57f837af7643656d9cbea4805190d9b9 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: Wed, 6 Mar 2024 10:50:41 +0800
Subject: [PATCH 1/4] docs: update demo

---
 docs/examples/getScrollBarSize.tsx | 80 ++++++++++++++++++++----------
 1 file changed, 53 insertions(+), 27 deletions(-)

diff --git a/docs/examples/getScrollBarSize.tsx b/docs/examples/getScrollBarSize.tsx
index a64a0ed0..7249a594 100644
--- a/docs/examples/getScrollBarSize.tsx
+++ b/docs/examples/getScrollBarSize.tsx
@@ -1,18 +1,42 @@
-import React from 'react';
 import getScrollBarSize, {
   getTargetScrollBarSize,
 } from 'rc-util/es/getScrollBarSize';
+import React from 'react';
+
+const cssText = `
+#customizeContainer::-webkit-scrollbar {
+  width: 2em;
+  height: 23px;
+  background: blue;
+}
+
+#customizeContainer::-webkit-scrollbar-thumb {
+  background: red;
+  height: 30px;
+}
+
+#scrollContainer {
+  scrollbar-color: red orange;
+  scrollbar-width: thin;
+}
+`;
 
 export default () => {
-  const divRef = React.useRef<HTMLDivElement>();
+  const webkitRef = React.useRef<HTMLDivElement>();
+  const scrollRef = React.useRef<HTMLDivElement>();
   const [sizeData, setSizeData] = React.useState('');
 
   React.useEffect(() => {
     const originSize = getScrollBarSize();
-    const targetSize = getTargetScrollBarSize(divRef.current);
+    const webkitSize = getTargetScrollBarSize(webkitRef.current);
+    const scrollSize = getTargetScrollBarSize(scrollRef.current);
 
     setSizeData(
-      `Origin: ${originSize}, Target: ${targetSize.width}/${targetSize.height}`,
+      [
+        `Origin: ${originSize}`,
+        `Webkit: ${webkitSize.width}/${webkitSize.height}`,
+        `Webkit: ${scrollSize.width}/${scrollSize.height}`,
+      ].join(', '),
     );
   }, []);
 
@@ -20,38 +44,40 @@ export default () => {
     <div>
       <style
         dangerouslySetInnerHTML={{
-          __html: `
-            #customizeContainer::-webkit-scrollbar {
-              width: 2em;
-              height: 23px;
-              background: blue;
-            }
-
-            #customizeContainer::-webkit-scrollbar-thumb {
-              background: red;
-              height: 30px;
-            }
-          `,
+          __html: cssText,
         }}
       />
-      <div
-        style={{ width: 100, height: 100, overflow: 'auto' }}
-        id="customizeContainer"
-        ref={divRef}
-      >
-        <div style={{ width: '100vw', height: '100vh', background: 'green' }}>
-          Hello World!
-        </div>
-      </div>
 
       <div
         style={{
-          width: 100,
+          width: 300,
           height: 100,
           overflow: 'scroll',
           background: 'yellow',
         }}
-      />
+      >
+        Origin
+      </div>
+
+      <div
+        style={{ width: 300, height: 100, overflow: 'auto' }}
+        id="customizeContainer"
+        ref={webkitRef}
+      >
+        <div style={{ width: '200vw', height: '200vh', background: 'yellow' }}>
+          Customize `-webkit-scrollbar`
+        </div>
+      </div>
+
+      <div
+        style={{ width: 300, height: 100, overflow: 'auto' }}
+        id="scrollContainer"
+        ref={scrollRef}
+      >
+        <div style={{ width: '200vw', height: '200vh', background: 'yellow' }}>
+          scrollbar-style
+        </div>
+      </div>
 
       <pre>{sizeData}</pre>
     </div>

From 5f5747d310a4eebd35bdc97243c9c9017e394d59 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: Wed, 6 Mar 2024 14:24:16 +0800
Subject: [PATCH 2/4] chore: fix style shaking

---
 src/getScrollBarSize.tsx | 121 ++++++++++++++++++++++++++-------------
 1 file changed, 80 insertions(+), 41 deletions(-)

diff --git a/src/getScrollBarSize.tsx b/src/getScrollBarSize.tsx
index 12a142f3..97bb9906 100644
--- a/src/getScrollBarSize.tsx
+++ b/src/getScrollBarSize.tsx
@@ -1,62 +1,101 @@
 /* eslint-disable no-param-reassign */
+import { removeCSS, updateCSS } from './Dom/dynamicCSS';
 
-let cached: number;
+type ScrollBarSize = { width: number; height: number };
 
-export default function getScrollBarSize(fresh?: boolean) {
-  if (typeof document === 'undefined') {
-    return 0;
-  }
-
-  if (fresh || cached === undefined) {
-    const inner = document.createElement('div');
-    inner.style.width = '100%';
-    inner.style.height = '200px';
+type ExtendCSSStyleDeclaration = CSSStyleDeclaration & {
+  scrollbarColor?: string;
+  scrollbarWidth?: string;
+};
 
-    const outer = document.createElement('div');
-    const outerStyle = outer.style;
+let cached: ScrollBarSize;
 
-    outerStyle.position = 'absolute';
-    outerStyle.top = '0';
-    outerStyle.left = '0';
-    outerStyle.pointerEvents = 'none';
-    outerStyle.visibility = 'hidden';
-    outerStyle.width = '200px';
-    outerStyle.height = '150px';
-    outerStyle.overflow = 'hidden';
+function measureScrollbarSize(ele?: HTMLElement): ScrollBarSize {
+  const randomId = `rc-scrollbar-measure-${Math.random()
+    .toString(36)
+    .substring(7)}`;
+  const measureEle = document.createElement('div');
+  measureEle.id = randomId;
 
-    outer.appendChild(inner);
+  // Create Style
+  const measureStyle: ExtendCSSStyleDeclaration = measureEle.style;
+  measureStyle.position = 'absolute';
+  measureStyle.left = '0';
+  measureStyle.top = '0';
+  measureStyle.width = '100px';
+  measureStyle.height = '100px';
+  measureStyle.overflow = 'scroll';
 
-    document.body.appendChild(outer);
+  // Clone Style if needed
+  let fallbackWidth: number;
+  let fallbackHeight: number;
+  if (ele) {
+    const targetStyle: ExtendCSSStyleDeclaration = getComputedStyle(ele);
+    measureStyle.scrollbarColor = targetStyle.scrollbarColor;
+    measureStyle.scrollbarWidth = targetStyle.scrollbarWidth;
 
-    const widthContained = inner.offsetWidth;
-    outer.style.overflow = 'scroll';
-    let widthScroll = inner.offsetWidth;
+    // Set Webkit style
+    const webkitScrollbarStyle = getComputedStyle(ele, '::-webkit-scrollbar');
 
-    if (widthContained === widthScroll) {
-      widthScroll = outer.clientWidth;
+    // Try to avoid CSP case
+    try {
+      updateCSS(
+        `
+     #${randomId}::-webkit-scrollbar {
+        width: ${webkitScrollbarStyle.width};
+        height: ${webkitScrollbarStyle.height};
+     }
+    `,
+        randomId,
+      );
+    } catch (e) {
+      // Get from style directly
+      fallbackWidth = parseInt(webkitScrollbarStyle.width, 10);
+      fallbackHeight = parseInt(webkitScrollbarStyle.height, 10);
     }
+  }
 
-    document.body.removeChild(outer);
+  document.body.appendChild(measureEle);
 
-    cached = widthContained - widthScroll;
-  }
-  return cached;
+  // Measure. Get fallback style if provided
+  const scrollWidth =
+    ele && fallbackWidth && !isNaN(fallbackWidth)
+      ? fallbackWidth
+      : measureEle.offsetWidth - measureEle.clientWidth;
+  const scrollHeight =
+    ele && fallbackHeight && !isNaN(fallbackHeight)
+      ? fallbackHeight
+      : measureEle.offsetHeight - measureEle.clientHeight;
+
+  // Clean up
+  document.body.removeChild(measureEle);
+  removeCSS(randomId);
+
+  return {
+    width: scrollWidth,
+    height: scrollHeight,
+  };
 }
 
-function ensureSize(str: string) {
-  const match = str.match(/^(.*)px$/);
-  const value = Number(match?.[1]);
-  return Number.isNaN(value) ? getScrollBarSize() : value;
+export default function getScrollBarSize(fresh?: boolean): number {
+  if (typeof document === 'undefined') {
+    return 0;
+  }
+
+  if (fresh || cached === undefined) {
+    cached = measureScrollbarSize();
+  }
+  return cached.width;
 }
 
 export function getTargetScrollBarSize(target: HTMLElement) {
-  if (typeof document === 'undefined' || !target || !(target instanceof Element)) {
+  if (
+    typeof document === 'undefined' ||
+    !target ||
+    !(target instanceof Element)
+  ) {
     return { width: 0, height: 0 };
   }
 
-  const { width, height } = getComputedStyle(target, '::-webkit-scrollbar');
-  return {
-    width: ensureSize(width),
-    height: ensureSize(height),
-  };
+  return measureScrollbarSize(target);
 }

From 0fe638ecffd153b0a4625600f010d362cbb95107 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: Wed, 6 Mar 2024 14:33:02 +0800
Subject: [PATCH 3/4] test: update testcase

---
 src/getScrollBarSize.tsx       |  2 +-
 tests/getScrollBarSize.test.ts | 29 +++++++----------------------
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/src/getScrollBarSize.tsx b/src/getScrollBarSize.tsx
index 97bb9906..92458451 100644
--- a/src/getScrollBarSize.tsx
+++ b/src/getScrollBarSize.tsx
@@ -37,7 +37,7 @@ function measureScrollbarSize(ele?: HTMLElement): ScrollBarSize {
     // Set Webkit style
     const webkitScrollbarStyle = getComputedStyle(ele, '::-webkit-scrollbar');
 
-    // Try to avoid CSP case
+    // Try wrap to handle CSP case
     try {
       updateCSS(
         `
diff --git a/tests/getScrollBarSize.test.ts b/tests/getScrollBarSize.test.ts
index b443d86d..9c03b945 100644
--- a/tests/getScrollBarSize.test.ts
+++ b/tests/getScrollBarSize.test.ts
@@ -1,7 +1,7 @@
-import { spyElementPrototypes } from '../src/test/domHook';
 import getScrollBarSize, {
   getTargetScrollBarSize,
 } from '../src/getScrollBarSize';
+import { spyElementPrototypes } from '../src/test/domHook';
 
 const DEFAULT_SIZE = 16;
 
@@ -9,13 +9,15 @@ describe('getScrollBarSize', () => {
   let defaultSize = DEFAULT_SIZE;
 
   beforeAll(() => {
-    let i = 0;
-
     spyElementPrototypes(HTMLElement, {
       offsetWidth: {
         get: () => {
-          i += 1;
-          return i % 2 ? 100 : 100 - defaultSize;
+          return 100;
+        },
+      },
+      clientWidth: {
+        get: () => {
+          return 100 - defaultSize;
         },
       },
     });
@@ -37,23 +39,6 @@ describe('getScrollBarSize', () => {
   });
 
   describe('getTargetScrollBarSize', () => {
-    it('validate', () => {
-      const getSpy = jest.spyOn(window, 'getComputedStyle').mockImplementation(
-        () =>
-          ({
-            width: '23px',
-            height: '93px',
-          } as any),
-      );
-
-      expect(getTargetScrollBarSize(document.createElement('div'))).toEqual({
-        width: 23,
-        height: 93,
-      });
-
-      getSpy.mockRestore();
-    });
-
     it('invalidate', () => {
       expect(
         getTargetScrollBarSize({ notValidateObject: true } as any),

From 307c6160ce23a21b240b1cdae8d8281ca45ded9e 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: Wed, 6 Mar 2024 14:35:52 +0800
Subject: [PATCH 4/4] chore: comment

---
 src/getScrollBarSize.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/getScrollBarSize.tsx b/src/getScrollBarSize.tsx
index 92458451..05cbb9a4 100644
--- a/src/getScrollBarSize.tsx
+++ b/src/getScrollBarSize.tsx
@@ -49,6 +49,9 @@ function measureScrollbarSize(ele?: HTMLElement): ScrollBarSize {
         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);