设置导航条(v-app-bar)重叠滚动条

Question

和这个帖子一样的问题，除了它是Vuetify。

是否有使用提供的API的解决方案?CSS是我最后一个选择。

codepen演示

<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中没有一个单独的prop。

但是你可以使用内置的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>，而忘记这样的操作。

用示例链接