fix(scrollbar): should restore scroll state on deactivated

tusen-ai · Jun 5, 2022 · 0bc47e1 · 0bc47e1
1 parent 5a90208
commit 0bc47e1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -146,7 +146,7 @@
     "treemate": "^0.3.11",
     "vdirs": "^0.1.8",
     "vooks": "^0.2.12",
-    "vueuc": "^0.4.37"
+    "vueuc": "^0.4.38"
   },
   "sideEffects": false,
   "homepage": "https://www.naiveui.com",

diff --git a/src/_internal/scrollbar/src/Scrollbar.tsx b/src/_internal/scrollbar/src/Scrollbar.tsx
@@ -11,7 +11,9 @@ import {
   CSSProperties,
   watchEffect,
   VNode,
-  HTMLAttributes
+  HTMLAttributes,
+  onActivated,
+  onDeactivated
 } from 'vue'
 import { on, off } from 'evtd'
 import { VResizeObserver } from 'vueuc'
@@ -269,9 +271,31 @@ const Scrollbar = defineComponent({
       return contentRef.value
     })
 
+    let isDeactivated = false
+    let activateStateInitialized = false
+    onActivated(() => {
+      isDeactivated = false
+      if (!activateStateInitialized) {
+        activateStateInitialized = true
+        return
+      }
+      // remount
+      scrollTo({ top: scrollX, left: scrollY })
+    })
+    onDeactivated(() => {
+      isDeactivated = true
+      if (!activateStateInitialized) {
+        activateStateInitialized = true
+      }
+    })
+
     // methods
-    const handleContentResize = sync
+    const handleContentResize = (): void => {
+      if (isDeactivated) return
+      sync()
+    }
     const handleContainerResize = (e: ResizeObserverEntry): void => {
+      if (isDeactivated) return
       const { onResize } = props
       if (onResize) onResize(e)
       sync()