fix(dialog): 多个弹窗关闭一个后出现滚动条

多个弹窗关闭一个后出现滚动条 fix Tencent#382
psaren · Feb 23, 2022 · 7d26b32 · 7d26b32
1 parent bc6a80e
commit 7d26b32
Showing 1 changed file with 17 additions and 4 deletions.
diff --git a/src/dialog/RenderDialog.tsx b/src/dialog/RenderDialog.tsx
@@ -53,9 +53,11 @@ const RenderDialog: React.FC<RenderDialogProps> = (props) => {
   const bodyCssTextRef = useRef<string>(document.body.style.cssText);
   const isModal = mode === 'modal';
   const canDraggable = props.draggable && mode === 'modeless';
+  const dialogOpenClass = `${prefixCls}__open`;
 
   useLayoutEffect(() => {
     if (visible) {
+      console.log('visible', visible);
       if (isModal && bodyOverflow.current !== 'hidden' && preventScrollThrough) {
         const scrollWidth = window.innerWidth - document.body.offsetWidth;
         // 减少回流
@@ -77,9 +79,12 @@ const RenderDialog: React.FC<RenderDialogProps> = (props) => {
         wrap.current.focus();
       }
     } else if (isModal) {
-      document.body.style.cssText = bodyCssTextRef.current;
+      const openDialogDom = document.querySelectorAll(`.${dialogOpenClass}`);
+      if (openDialogDom.length < 1) {
+        document.body.style.cssText = bodyCssTextRef.current;
+      }
     }
-  }, [preventScrollThrough, getContainer, visible, mode, isModal]);
+  }, [preventScrollThrough, getContainer, visible, mode, isModal, dialogOpenClass]);
 
   useEffect(() => {
     if (visible) {
@@ -97,7 +102,10 @@ const RenderDialog: React.FC<RenderDialogProps> = (props) => {
     }
     if (isModal && preventScrollThrough) {
       // 还原body的滚动条
-      isModal && (document.body.style.overflow = bodyOverflow.current);
+      const openDialogDom = document.querySelectorAll(`.${dialogOpenClass}`);
+      if (isModal && openDialogDom.length < 1) {
+        document.body.style.overflow = bodyOverflow.current;
+      }
     }
     if (!isModal) {
       const { style } = dialog.current;
@@ -260,7 +268,12 @@ const RenderDialog: React.FC<RenderDialogProps> = (props) => {
     };
 
     const dialogBody = renderDialog(`${props.placement ? `${prefixCls}--${props.placement}` : ''}`);
-    const wrapClass = classnames(props.className, `${prefixCls}__ctx`, `${prefixCls}__ctx--fixed`);
+    const wrapClass = classnames(
+      props.className,
+      `${prefixCls}__ctx`,
+      `${prefixCls}__ctx--fixed`,
+      visible ? dialogOpenClass : '',
+    );
     const dialog = (
       <div ref={wrap} className={wrapClass} style={wrapStyle} onKeyDown={handleKeyDown}>
         {mode === 'modal' && renderMask()}