diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts
index 2228a552..a3e15fa1 100644
--- a/packages/stage/src/StageCore.ts
+++ b/packages/stage/src/StageCore.ts
@@ -154,6 +154,9 @@ export default class StageCore extends EventEmitter {
     }
 
     this.mask.setLayout(el);
+
+    el.scrollIntoView();
+
     this.dr.select(el, event);
     this.selectedDom = el;
 
diff --git a/packages/stage/src/StageMask.ts b/packages/stage/src/StageMask.ts
index 86c2b571..c41017a0 100644
--- a/packages/stage/src/StageMask.ts
+++ b/packages/stage/src/StageMask.ts
@@ -130,9 +130,14 @@ export default class StageMask extends Rule {
     if (!page) return;
 
     this.page = page;
+
+    this.pageScrollParent?.removeEventListener('scroll', this.pageScrollParentScrollHandler);
+
     this.pageScrollParent = getScrollParent(page) || this.core.renderer.contentWindow?.document.documentElement || null;
     this.pageResizeObserver?.disconnect();
 
+    this.pageScrollParent?.addEventListener('scroll', this.pageScrollParentScrollHandler);
+
     if (typeof ResizeObserver !== 'undefined') {
       this.pageResizeObserver = new ResizeObserver((entries) => {
         const [entry] = entries;
@@ -313,4 +318,11 @@ export default class StageMask extends Rule {
   private mouseLeaveHandler = () => {
     setTimeout(() => this.emit('clearHighlight'), throttleTime);
   };
+
+  private pageScrollParentScrollHandler = () => {
+    if (!this.pageScrollParent) return;
+    this.scrollLeft = this.pageScrollParent.scrollLeft;
+    this.scrollTop = this.pageScrollParent.scrollTop;
+    this.scroll();
+  };
 }