feat: Support target scrollbar size (#243)

* feat: Support target scrollbar size

* test: test case

Author: zombieJ

examples/getScrollBarSize.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable react/no-danger */
+
+import React from 'react';
+import getScrollBarSize, {
+  getTargetScrollBarSize,
+} from '../src/getScrollBarSize';
+
+export default () => {
+  const divRef = React.useRef<HTMLDivElement>();
+  const [sizeData, setSizeData] = React.useState('');
+
+  React.useEffect(() => {
+    const originSize = getScrollBarSize();
+    const targetSize = getTargetScrollBarSize(divRef.current);
+
+    setSizeData(
+      `Origin: ${originSize}, Target: ${targetSize.width}/${targetSize.height}`,
+    );
+  }, []);
+
+  return (
+    <div>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            #customizeContainer::-webkit-scrollbar {
+              width: 2em;
+              height: 23px;
+              background: blue;
+            }
+
+            #customizeContainer::-webkit-scrollbar-thumb {
+              background: red;
+              height: 30px;
+            }
+          `,
+        }}
+      />
+      <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,
+          height: 100,
+          overflow: 'scroll',
+          background: 'yellow',
+        }}
+      />
+
+      <pre>{sizeData}</pre>
+    </div>
+  );
+};

src/getScrollBarSize.js renamed to src/getScrollBarSize.tsx

@@ -1,6 +1,8 @@
-let cached;
+/* eslint-disable no-param-reassign */
 
-export default function getScrollBarSize(fresh) {
+let cached: number;
+
+export default function getScrollBarSize(fresh?: boolean) {
   if (typeof document === 'undefined') {
     return 0;
   }
@@ -14,8 +16,8 @@ export default function getScrollBarSize(fresh) {
     const outerStyle = outer.style;
 
     outerStyle.position = 'absolute';
-    outerStyle.top = 0;
-    outerStyle.left = 0;
+    outerStyle.top = '0';
+    outerStyle.left = '0';
     outerStyle.pointerEvents = 'none';
     outerStyle.visibility = 'hidden';
     outerStyle.width = '200px';
@@ -40,3 +42,21 @@ export default function getScrollBarSize(fresh) {
   }
   return cached;
 }
+
+function ensureSize(str: string) {
+  const match = str.match(/^(.*)px$/);
+  const value = Number(match?.[1]);
+  return Number.isNaN(value) ? getScrollBarSize() : value;
+}
+
+export function getTargetScrollBarSize(target: HTMLElement) {
+  if (typeof document === 'undefined' || !target) {
+    return { width: 0, height: 0 };
+  }
+
+  const { width, height } = getComputedStyle(target, '::-webkit-scrollbar');
+  return {
+    width: ensureSize(width),
+    height: ensureSize(height),
+  };
+}

tests/getScrollBarSize.test.ts

@@ -0,0 +1,53 @@
+import { spyElementPrototypes } from '../src/test/domHook';
+import getScrollBarSize, {
+  getTargetScrollBarSize,
+} from '../src/getScrollBarSize';
+
+const DEFAULT_SIZE = 16;
+
+describe('getScrollBarSize', () => {
+  let defaultSize = DEFAULT_SIZE;
+
+  beforeAll(() => {
+    let i = 0;
+
+    spyElementPrototypes(HTMLElement, {
+      offsetWidth: {
+        get: () => {
+          i += 1;
+          return i % 2 ? 100 : 100 - defaultSize;
+        },
+      },
+    });
+  });
+
+  beforeEach(() => {
+    defaultSize = DEFAULT_SIZE;
+  });
+
+  it('basicSize', () => {
+    expect(getScrollBarSize()).toEqual(16);
+  });
+
+  it('fresh it', () => {
+    expect(getScrollBarSize(true)).toEqual(16);
+
+    defaultSize = 33;
+    expect(getScrollBarSize(true)).toEqual(33);
+  });
+
+  it('getTargetScrollBarSize', () => {
+    jest.spyOn(window, 'getComputedStyle').mockImplementation(
+      () =>
+        ({
+          width: '23px',
+          height: '93px',
+        } as any),
+    );
+
+    expect(getTargetScrollBarSize(document.createElement('div'))).toEqual({
+      width: 23,
+      height: 93,
+    });
+  });
+});