fix: webkit usage (#14)

* fix: webkit usage

* test: add test case

Author: zombieJ

src/useScrollLocker.tsx

@@ -1,16 +1,14 @@
 import * as React from 'react';
 import { updateCSS, removeCSS } from 'rc-util/lib/Dom/dynamicCSS';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
+import { getTargetScrollBarSize } from 'rc-util/lib/getScrollBarSize';
 import { isBodyOverflowing } from './util';
 
 const UNIQUE_ID = `rc-util-locker-${Date.now()}`;
 
 let uuid = 0;
 
-export default function useScrollLocker(
-  lock?: boolean,
-) {
+export default function useScrollLocker(lock?: boolean) {
   const mergedLock = !!lock;
   const [id] = React.useState(() => {
     uuid += 1;
@@ -19,7 +17,7 @@ export default function useScrollLocker(
 
   useLayoutEffect(() => {
     if (mergedLock) {
-      const scrollbarSize = getScrollBarSize();
+      const scrollbarSize = getTargetScrollBarSize(document.body).width;
       const isOverflow = isBodyOverflowing();
 
       updateCSS(

tests/webkit.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Portal from '../src';
+import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
+
+jest.mock('../src/util', () => {
+  const origin = jest.requireActual('../src/util');
+  return {
+    ...origin,
+    isBodyOverflowing: () => true,
+  };
+});
+
+// Revert `useLayoutEffect` back to real one since we should keep order for test
+jest.mock('rc-util/lib/hooks/useLayoutEffect', () => {
+  const origin = jest.requireActual('react');
+  return origin.useLayoutEffect;
+});
+
+// Revert `useLayoutEffect` back to real one since we should keep order for test
+jest.mock('rc-util/lib/getScrollBarSize', () => {
+  const origin = jest.requireActual('rc-util/lib/getScrollBarSize');
+  return {
+    ...origin,
+
+    getTargetScrollBarSize: () => ({ width: 93, height: 1128 }),
+  };
+});
+
+describe('::-webkit-scrollbar', () => {
+  it('support ::-webkit-scrollbar', () => {
+    render(
+      <Portal open autoLock>
+        <p />
+      </Portal>,
+    );
+
+    expect(document.body).toHaveStyle({
+      width: 'calc(100% - 93px)',
+    });
+  });
+});