zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

fix: dialog scroll lock 2 (#156)

zio/stable
Ayaka Rizumu 2022-11-27 16:02:09 +08:00 committed by GitHub
parent 076b55ca42
commit 3e26326a31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/modal/ModalDialog.vue
View File

@ -98,11 +98,15 @@ function onTransitionEnd() {
<template> <template>
<div <div
v-if="isVisible" 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'" :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 <div
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out 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'" :class="isOut ? 'opacity-0' : 'opacity-85'"
@click="close" @click="close"
/> />
@ -116,3 +120,12 @@ function onTransitionEnd() {
</div> </div>
</div> </div>
</template> </template>
<style socped>
.scrollbar-hide {
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
</style>