fix: Not lock when window is not scrollable

Author: zombieJ

src/useScrollLocker.tsx

@@ -4,6 +4,7 @@ import useLayoutEffect, {
   useLayoutUpdateEffect,
 } from 'rc-util/lib/hooks/useLayoutEffect';
 import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
+import { isBodyOverflowing } from './util';
 
 let lockCount = 0;
 let locked = false;
@@ -18,11 +19,13 @@ function syncLocker() {
 
     if (locked) {
       const scrollbarSize = getScrollBarSize();
+      const isOverflow = isBodyOverflowing();
+
       updateCSS(
         `
 html body {
   overflow-y: hidden;
-  width: calc(100% - ${scrollbarSize}px);
+  ${isOverflow ? `width: calc(100% - ${scrollbarSize}px);` : ''}
 }`,
         UNIQUE_ID,
       );

src/util.ts

@@ -0,0 +1,10 @@
+/**
+ * Test usage export. Do not use in your production
+ */
+export function isBodyOverflowing() {
+  return (
+    document.body.scrollHeight >
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    window.innerWidth > document.body.offsetWidth
+  );
+}

tests/index.test.tsx

@@ -2,7 +2,21 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import Portal from '../src';
 
+global.isOverflow = true;
+
+jest.mock('../src/util', () => {
+  const origin = jest.requireActual('../src/util');
+  return {
+    ...origin,
+    isBodyOverflowing: () => global.isOverflow,
+  };
+});
+
 describe('Portal', () => {
+  beforeEach(() => {
+    global.isOverflow = true;
+  });
+
   it('Order', () => {
     render(
       <Portal open debug="root">
@@ -103,5 +117,14 @@ describe('Portal', () => {
     test('StrictMode', {
       wrapper: React.StrictMode,
     });
+
+    it('window not scrollable', () => {
+      global.isOverflow = false;
+      render(<Portal open />);
+
+      expect(document.body).not.toHaveStyle({
+        overflowY: 'hidden',
+      });
+    });
   });
 });