From 3e26326a31b5805fe8e56cfe15b69f29f92b3ddf Mon Sep 17 00:00:00 2001
From: Ayaka Rizumu <464388324@qq.com>
Date: Sun, 27 Nov 2022 16:02:09 +0800
Subject: [PATCH] fix: dialog scroll lock 2 (#156)

---
 components/modal/ModalDialog.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/modal/ModalDialog.vue b/components/modal/ModalDialog.vue
index f0746009..9b888d22 100644
--- a/components/modal/ModalDialog.vue
+++ b/components/modal/ModalDialog.vue
@@ -98,11 +98,15 @@ function onTransitionEnd() {
 <template>
   <div
     v-if="isVisible"
-    fixed top-0 bottom-0 left-0 right-0 z-20000
+    class="scrollbar-hide"
+    fixed top-0 bottom-0 left-0 right-0 z-20000 overscroll-none overflow-y-scroll
     :class="modelValue ? '' : 'pointer-events-none'"
   >
+    <!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
+    <!-- corresponding to issue: #106, so please don't remove it. -->
     <div
       bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
+      h="[calc(100%+0.5px)]"
       :class="isOut ? 'opacity-0' : 'opacity-85'"
       @click="close"
     />
@@ -116,3 +120,12 @@ function onTransitionEnd() {
     </div>
   </div>
 </template>
+
+<style socped>
+.scrollbar-hide {
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+</style>