feat: add scrollLock prop to control body scroll lock

README.md

@@ -83,6 +83,7 @@ ReactDOM.render(
 | closeIcon | ReactNode |  | specific the close icon. |  |
 | forceRender | Boolean | false | Create dialog dom node before dialog first show |  |
 | focusTriggerAfterClose | Boolean | true | focus trigger element when dialog closed |  |
+| scrollLock | Boolean | true | Control whether to lock body scroll when dialog opens |  |
 | modalRender | (node: ReactNode) => ReactNode |  | Custom modal content render | 8.3.0 |
 
 ## Development

src/DialogWrap.tsx

@@ -23,8 +23,10 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
     closable,
     panelRef,
     keyboard = true,
+    scrollLock = true,
     onClose,
   } = props;
+  const { scrollLock: _, ...restProps } = props;
   const [animatedVisible, setAnimatedVisible] = React.useState<boolean>(visible);
 
   const refContext = React.useMemo(() => ({ panel: panelRef }), [panelRef]);
@@ -55,10 +57,10 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
         onEsc={onEsc}
         autoDestroy={false}
         getContainer={getContainer}
-        autoLock={visible || animatedVisible}
+        autoLock={scrollLock && (visible || animatedVisible)}
       >
         <Dialog
-          {...props}
+          {...restProps}
           destroyOnHidden={destroyOnHidden}
           afterClose={() => {
             const closableObj = closable && typeof closable === 'object' ? closable : {};

src/IDialogPropTypes.ts

@@ -59,6 +59,8 @@ export type IDialogPropTypes = {
   // https://github.com/react-component/dialog/issues/95
   focusTriggerAfterClose?: boolean;
   focusTrap?: boolean;
+  /** Control whether to lock body scroll when modal opens. Default is true. */
+  scrollLock?: boolean;
 
   // Refs
   panelRef?: React.Ref<HTMLDivElement>;

tests/scroll.spec.tsx

@@ -78,4 +78,23 @@ describe('Dialog.Scroll', () => {
 
     unmount();
   });
+
+  it('should not lock body scroll when scrollLock is false', () => {
+    const { unmount } = render(<Dialog visible scrollLock={false} />);
+
+    // body should not have overflow:hidden when scrollLock is false
+    expect(document.body).not.toHaveStyle({
+      overflowY: 'hidden',
+    });
+
+    unmount();
+  });
+
+  it('should lock body scroll when scrollLock is true (default)', () => {
+    const { unmount } = render(<Dialog visible scrollLock={true} />);
+    expect(document.body).toHaveStyle({
+      overflowY: 'hidden',
+    });
+    unmount();
+  });
 });