-
-
-
+
+
+
+
diff --git a/src/@core/scss/_default-layout-w-vertical-nav.scss b/src/@core/scss/_default-layout-w-vertical-nav.scss
index 873f82d5..2a0e13cb 100644
--- a/src/@core/scss/_default-layout-w-vertical-nav.scss
+++ b/src/@core/scss/_default-layout-w-vertical-nav.scss
@@ -48,8 +48,7 @@ $header: ".layout-navbar";
/* ℹ️ Ensure header styles are preserved when dialog is opened,
but only if window was scrolled before dialog opened
*/
- html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed,
- html.dialog-scroll-locked &.window-scrolled.layout-navbar-fixed {
+ html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed {
#{$header} {
padding-inline: 1rem;
diff --git a/src/@core/scss/_misc.scss b/src/@core/scss/_misc.scss
index c66f3a59..eff171d9 100644
--- a/src/@core/scss/_misc.scss
+++ b/src/@core/scss/_misc.scss
@@ -45,7 +45,7 @@ code {
inset-block-start: 0;
inset-inline: 0;
pointer-events: none;
- transition: all 0.3s ease-in-out;
+ transition: padding 0.3s ease-in-out;
.v-theme--light & {
background: rgba(var(--v-theme-surface), 0.6);
diff --git a/src/@layouts/components/VerticalNavLayout.vue b/src/@layouts/components/VerticalNavLayout.vue
index eec98eba..3437dce0 100644
--- a/src/@layouts/components/VerticalNavLayout.vue
+++ b/src/@layouts/components/VerticalNavLayout.vue
@@ -23,9 +23,7 @@ export default defineComponent({
// 监听弹窗状态变化
const checkDialogState = () => {
const wasDialogOpen = isDialogOpen.value
- isDialogOpen.value =
- document.documentElement.classList.contains('dialog-scroll-locked') ||
- document.documentElement.classList.contains('v-overlay-scroll-blocked')
+ isDialogOpen.value = document.documentElement.classList.contains('v-overlay-scroll-blocked')
// 当弹窗刚打开时，记录当前的滚动状态
if (!wasDialogOpen && isDialogOpen.value) {
@@ -121,7 +119,7 @@ export default defineComponent({
'layout-navbar-fixed',
mdAndDown.value && 'layout-overlay-nav',
route.meta.layoutWrapperClasses,
- (scrollDistance.value > 0 || (isDialogOpen.value && wasScrolledBeforeDialog.value)) && 'window-scrolled',
+ (scrollDistance.value > 5 || (isDialogOpen.value && wasScrolledBeforeDialog.value)) && 'window-scrolled',
],
},
[verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay],
diff --git a/src/@layouts/styles/_default-layout.scss b/src/@layouts/styles/_default-layout.scss
index d15794a3..c8fa209a 100644
--- a/src/@layouts/styles/_default-layout.scss
+++ b/src/@layouts/styles/_default-layout.scss
@@ -6,8 +6,9 @@
html {
background: rgb(var(--v-theme-background));
- min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
- overflow-y: overlay;
+ min-block-size: 100vh;
+ min-block-size: 100dvh;
+ overflow-y: hidden;
}
body {
@@ -40,8 +41,8 @@ body,
// TODO: Use grid gutter variable here;
padding-block: 1.5rem;
- padding-inline: 0.5rem;
padding-block-start: calc(env(safe-area-inset-top) + 4.5rem);
+ padding-inline: 0.5rem;
// display: flex;display
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 9014a907..ccee94bf 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -3,15 +3,15 @@
@tailwind components;
@tailwind utilities;
-
-@supports (-webkit-touch-callout: none) {
- html.v-overlay-scroll-blocked {
- position: inherit;
- }
+html.v-overlay-scroll-blocked {
+ position: static;
}
-body {
- overscroll-behavior: none;
+html.v-overlay-scroll-blocked body {
+ position: fixed;
+ overflow: hidden;
+ inset: 0;
+ inset-block-start: var(--v-body-scroll-y);
}
@mixin hide-scrollbar {