From 0ecd65490b2d657e72d8c94c165258f19756ce96 Mon Sep 17 00:00:00 2001
From: "yuanfei.gyf" <yuanfei.gyf@alibaba-inc.com>
Date: Thu, 4 Jul 2019 17:59:31 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=A7=A3=E5=86=B3=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=86=85=E5=AE=B9=E6=97=A0=E6=B3=95=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dialog.tsx | 45 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/Dialog.tsx b/src/Dialog.tsx
index 49e807d..45d9b5b 100644
--- a/src/Dialog.tsx
+++ b/src/Dialog.tsx
@@ -6,8 +6,38 @@ import IDialogPropTypes from './IDialogPropTypes';
 function noop() {
 }
 
-function move(e) {
-  e.preventDefault();
+// 缓存body原有的样式属性
+let originPosition;
+let originWidth;
+let originTop;
+// body是否已设置成fixed组织滚动
+let fixed = false;
+// dialog实例计数
+let count = 0;
+
+function fixedBody() {
+  if (!fixed) { // 避免重复设置造成Body原属性获取失败
+    const { position, width, top } = document.body.style;
+    originPosition = position;
+    originWidth = width;
+    originTop = top;
+    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+    document.body.style.position = 'fixed';
+    document.body.style.width = '100%';
+    document.body.style.top = `-${scrollTop}px`;
+    fixed = true;
+  }
+}
+
+function looseBody() {
+  if (!count) { // 如果当前页面还存在Dialog实例，则不能重置
+    const body = document.body;
+    body.style.position = originPosition;
+    body.style.width = originWidth;
+    window.scrollTo(0, -parseInt(body.style.top || '0', 10));
+    body.style.top = originTop;
+    fixed = false;
+  }
 }
 
 export default class Dialog extends React.Component<IDialogPropTypes, any> {
@@ -28,18 +58,18 @@ export default class Dialog extends React.Component<IDialogPropTypes, any> {
   footerRef: any;
   wrapRef: any;
 
-  componentDidMount() {
-    if (this.wrapRef) {
-      this.wrapRef.addEventListener('touchmove', move, false);
-    }
+  constructor(props) {
+    super(props);
+    count++;
   }
 
   componentWillUnmount() {
+    count--;
+    looseBody();
     // fix: react@16 no dismissing animation
     document.body.style.overflow = '';
     if (this.wrapRef) {
       this.wrapRef.style.display = 'none';
-      this.wrapRef.removeEventListener('touchmove', move, false);
     }
   }
 
@@ -224,6 +254,7 @@ export default class Dialog extends React.Component<IDialogPropTypes, any> {
     const { prefixCls, maskClosable } = props;
     const style = this.getWrapStyle();
     if (props.visible) {
+      fixedBody();
       style.display = null;
     }
     return (