Vuetify navbar (v-app-bar) 重叠滚动条

Question

与相同的问题，只是它是 Vuetify。

有没有使用提供的解决方案API？ CSS 将是我选择的最后一个选项。

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

    <v-toolbar-title>Homepage</v-toolbar-title>

  </v-app-bar>
</template>

Answer 1

目前API中没有一个道具。

但是你可以通过内置的 vuetify 类和指令来帮助自己很多。

首先，您（很遗憾）需要编写一些 CSS 来手动禁用初始页面滚动：

html {
  overflow-y: hidden;
}

.scrollable {
  overflow-y: scroll;
}

然后您需要使用 scrollable pt-0 mt-16 类将 <v-main> 组件添加到您的应用程序中，并将所有未来的应用程序组件包装到其中。此类将从默认值 <v-app-bar> 调整内边距，并在 <v-main>.

中直接启用滚动

最后，您应该将 v-resize 指令添加到 <v-main> 以在用户调整页面大小时自动重新计算您的页面大小：

<v-main class="scrollable pt-0 mt-16" v-resize="onResize">
    ...your application data...
</v-main>

...
methods: {
  onResize() {
    //64px is v-app-bar height in your case
    document.querySelector(".scrollable").style.height = (window.innerHeight - 64) + 'px';
  }
},

就是这样。然后你可以创建你的自定义组件来包装 <v-main> 而忘记这样的操作。

Codepen link with an example

Vuetify navbar (v-app-bar) 重叠滚动条

Vuetify navbar (v-app-bar) overlap scrollbar

css

vuetify.js