fix(modal): won't clear document body's overflow style if it's unmoun…

…ted when it is shown, closes #3015
tusen-ai · May 26, 2022 · 2c6d75c · 2c6d75c
1 parent 1a16082
commit 2c6d75c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -6,6 +6,7 @@
 - Fix `n-watermark` not working when provided `cls-prefix`
 - Fix `n-dropdown`'s incorrect render arrow when props `show-arrow: true` [#2977](https://github.com/TuSimple/naive-ui/issues/2977)
 - Fix `n-global-style` doesn't clear body element's padding and margin.
+- Fix `n-modal` won't clear document body's overflow style if it's unmounted when it is shown, closes [#3015](https://github.com/TuSimple/naive-ui/issues/3015).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -6,6 +6,7 @@
 - 修复 `n-watermark` 在全局配置了 `cls-prefix` 时失效
 - 修复 `n-dropdown` 在 `show-arrow: true` 情况下不显示箭头的问题，关闭[#2977](https://github.com/TuSimple/naive-ui/issues/2977)
 - 修复 `n-global-style` 没有清空 body 的 padding 和 margin
+- 修复 `n-modal` 在显示时被写在不会清除 body 的 overflow，关闭 [#3015](https://github.com/TuSimple/naive-ui/issues/3015)
 
 ### Feats
 

diff --git a/src/_utils/composable/use-lock-html-scroll.ts b/src/_utils/composable/use-lock-html-scroll.ts
@@ -19,6 +19,14 @@ export function useLockHtmlScroll (lockRef: Ref<boolean>): void {
   if (typeof document === 'undefined') return
   const el = document.documentElement
   let watchStopHandle: WatchStopHandle | undefined
+  let activated = false
+  const unlock = (): void => {
+    el.style.marginRight = originalMarginRight
+    el.style.overflow = originalOverflow
+    el.style.overflowX = originalOverflowX
+    el.style.overflowY = originalOverflowY
+    lockHtmlScrollRightCompensationRef.value = '0px'
+  }
   onMounted(() => {
     watchStopHandle = watch(
       lockRef,
@@ -38,16 +46,14 @@ export function useLockHtmlScroll (lockRef: Ref<boolean>): void {
             el.style.overflowX = 'hidden'
             el.style.overflowY = 'hidden'
           }
+          activated = true
           lockCount++
         } else {
           lockCount--
           if (!lockCount) {
-            el.style.marginRight = originalMarginRight
-            el.style.overflow = originalOverflow
-            el.style.overflowX = originalOverflowX
-            el.style.overflowY = originalOverflowY
-            lockHtmlScrollRightCompensationRef.value = '0px'
+            unlock()
           }
+          activated = false
         }
       },
       {
@@ -57,5 +63,12 @@ export function useLockHtmlScroll (lockRef: Ref<boolean>): void {
   })
   onBeforeUnmount(() => {
     watchStopHandle?.()
+    if (activated) {
+      lockCount--
+      if (!lockCount) {
+        unlock()
+      }
+      activated = false
+    }
   })
 }