优化 HTML 结构，调整 CSS 样式

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;

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);

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],

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
 

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 {