diff --git a/package.json b/package.json index 75671759234..03dc179cefc 100644 --- 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 index 070daebb7f9..ce53000fb9c 100644 --- 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()