Vuetify框架v-app-bar导航栏与滚动条重叠，如何用官方API解决？

优先：Vuetify原生API修复 #

• 故障根源是v-app-bar同时配置了app和absolute属性，二者逻辑冲突：app是Vuetify的全局布局专属属性，会自动将导航栏纳入全局布局计算，默认适配滚动条位置避免重叠；absolute会强制让导航栏脱离默认布局流，导致原生的布局适配逻辑失效。
• 直接移除absolute属性即可解决滚动条重叠问题，修改后的代码如下：

<template>
  <v-app-bar app dark class="navbar-bg" >
    <v-app-bar-nav-icon @click="toggleSidebar" />
    <v-toolbar-title>Homepage</v-toolbar-title>
  </v-app-bar>
</template>

• 若你需要实现导航栏悬浮在内容上方的视觉效果（例如半透明导航栏覆盖顶部头图），无需额外添加absolute属性，只需给v-main添加Vuetify内置工具类pt-0取消默认的顶部内边距即可，既保留原生布局的滚动条适配能力，也能实现预期的悬浮效果。

备选：CSS兼容方案 #

如果业务场景必须保留absolute属性，可以给导航栏的自定义类添加样式，动态适配滚动条宽度：

.navbar-bg {
  /* 差值为滚动条宽度，自动调整右侧偏移避免重叠 */
  right: calc(100vw - 100%);
}

内容的提问来源于stack exchange，提问作者Tan Nguyen