From f7ba716fe90cd554e1d6acd58b2856e18783c443 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 13 Apr 2022 12:59:48 +0800
Subject: [PATCH] =?UTF-8?q?fix(stage):=20=E4=BF=AE=E5=A4=8D=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E5=AE=B9=E5=99=A8=E5=A4=A7=E5=B0=8F=E5=8F=91=E7=94=9F?=
 =?UTF-8?q?=E5=8F=98=E5=8C=96=E6=97=B6=EF=BC=8C=E5=AF=BC=E8=87=B4=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E8=B7=9D=E7=A6=BB=E5=8F=AF=E8=83=BD=E8=B6=85=E5=87=BA?=
 =?UTF-8?q?=E6=9C=80=E5=A4=A7=E6=BB=9A=E5=8A=A8=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stage/src/StageMask.ts | 72 +++++++++++++++++++++------------
 1 file changed, 46 insertions(+), 26 deletions(-)

diff --git a/packages/stage/src/StageMask.ts b/packages/stage/src/StageMask.ts
index c6d1b176f..adadc2f54 100644
--- a/packages/stage/src/StageMask.ts
+++ b/packages/stage/src/StageMask.ts
@@ -81,6 +81,8 @@ export default class StageMask extends Rule {
   public height = 0;
   public wrapperHeight = 0;
   public wrapperWidth = 0;
+  public maxScrollTop = 0;
+  public maxScrollLeft = 0;
 
   private mode: Mode = Mode.ABSOLUTE;
   private pageResizeObserver: ResizeObserver | null = null;
@@ -136,6 +138,9 @@ export default class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.setHeight(clientHeight);
         this.setWidth(clientWidth);
+
+        this.fixScrollValue();
+        this.scroll();
       });
 
       this.pageResizeObserver.observe(page);
@@ -145,6 +150,8 @@ export default class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.wrapperHeight = clientHeight;
         this.wrapperWidth = clientWidth;
+        this.setMaxScrollLeft();
+        this.setMaxScrollTop();
       });
       this.wrapperResizeObserver.observe(this.wrapper);
     }
@@ -179,6 +186,13 @@ export default class StageMask extends Rule {
   private scroll() {
     let { scrollLeft, scrollTop } = this;
 
+    if (this.pageScrollParent) {
+      this.pageScrollParent.scrollTo({
+        top: scrollTop,
+        left: scrollLeft,
+      });
+    }
+
     if (this.mode === Mode.FIXED) {
       scrollLeft = 0;
       scrollTop = 0;
@@ -198,6 +212,7 @@ export default class StageMask extends Rule {
    */
   private setHeight(height: number): void {
     this.height = height;
+    this.setMaxScrollTop();
     this.content.style.height = `${height}px`;
   }
 
@@ -207,9 +222,35 @@ export default class StageMask extends Rule {
    */
   private setWidth(width: number): void {
     this.width = width;
+    this.setMaxScrollLeft();
     this.content.style.width = `${width}px`;
   }
 
+  /**
+   * 计算并设置最大滚动宽度
+   */
+  private setMaxScrollLeft(): void {
+    this.maxScrollLeft = this.width - this.wrapperWidth;
+  }
+
+  /**
+   * 计算并设置最大滚动高度
+   */
+  private setMaxScrollTop(): void {
+    this.maxScrollTop = this.height - this.wrapperHeight;
+  }
+
+  /**
+   * 修复滚动距离
+   * 由于滚动容器变化等因素，会导致当前滚动的距离不正确
+   */
+  private fixScrollValue(): void {
+    if (this.scrollTop < 0) this.scrollTop = 0;
+    if (this.scrollLeft < 0) this.scrollLeft = 0;
+    if (this.maxScrollTop < this.scrollTop) this.scrollTop = this.maxScrollTop;
+    if (this.maxScrollLeft < this.scrollLeft) this.scrollLeft = this.maxScrollLeft;
+  }
+
   /**
    * 点击事件处理函数
    * @param event 事件对象
@@ -246,37 +287,16 @@ export default class StageMask extends Rule {
     if (!this.page) throw new Error('page 未初始化');
 
     const { deltaY, deltaX } = event;
-    const { height, wrapperHeight, width, wrapperWidth } = this;
-
-    const maxScrollTop = height - wrapperHeight;
-    const maxScrollLeft = width - wrapperWidth;
-
-    if (maxScrollTop > 0) {
-      if (deltaY > 0) {
-        this.scrollTop = this.scrollTop + Math.min(maxScrollTop - this.scrollTop, deltaY);
-      } else {
-        this.scrollTop = Math.max(this.scrollTop + deltaY, 0);
-      }
+    if (this.maxScrollTop > 0) {
+      this.scrollTop = this.scrollTop + deltaY;
     }
 
-    if (width > wrapperWidth) {
-      if (deltaX > 0) {
-        this.scrollLeft = this.scrollLeft + Math.min(maxScrollLeft - this.scrollLeft, deltaX);
-      } else {
-        this.scrollLeft = Math.max(this.scrollLeft + deltaX, 0);
-      }
+    if (this.maxScrollLeft > 0) {
+      this.scrollLeft = this.scrollLeft + deltaX;
     }
 
-    if (this.mode !== Mode.FIXED) {
-      this.scrollTo(this.scrollLeft, this.scrollTop);
-    }
+    this.fixScrollValue();
 
-    if (this.pageScrollParent) {
-      this.pageScrollParent.scrollTo({
-        top: this.scrollTop,
-        left: this.scrollLeft,
-      });
-    }
     this.scroll();
 
     this.emit('scroll', event);