VuetifyJS - 滚动 v-navigation-drawer

Posted 2023-02-23

【中文标题】VuetifyJS - 滚动 v-navigation-drawer

【英文标题】：VuetifyJS - Scrolling v-navigation-drawer

【发布时间】：2019-06-30 14:43:16

【问题描述】：

我是 VueJs 的新手，我开始着手我的第一个项目，该项目需要我有一个侧面板（抽屉）作为导航栏，并且始终可见。

到目前为止，一切都很好，看起来完全符合我的要求。

问题是每次我放很多链接时，抽屉都不会滚动以查看我放在那里的所有链接。

我尝试过使用 css，但没有任何反应。有人对我应该做什么有任何提示吗？

当链接超出页面或屏幕很小时，我只需要抽屉可以滚动。

我所做的是将我的抽屉封闭在一个带有“可滚动”类的 div 中，并添加了以下 css：

.scrollable height:100%; overflow:auto;

我也尝试了this，因为它是我能找到的最接近我的问题的方法

【问题讨论】：

你能给我们看看这个 CSS 吗？

@jom 编辑了问题，请检查

你有没有用其他方法解决这个问题？

【参考方案1】：

如果按照the documentation 添加app 选项，导航抽屉应该是可滚动的

我仍然有一次无法将app 选项添加到抽屉的问题，因为我有两个并排的抽屉。

我刚刚将这种样式添加到我的抽屉中，它成功了：

calc(100% - 48px); height: 100vh;

【参考方案2】：

由于 v-navigation-drawer 中的“绝对”关键字，我遇到了同样的问题。尝试删除它，它可能会起作用。

<v-navigation-drawer class="blue-grey lighten-5 height-app" v-model="drawer" temporary app width="310"> </v-navigation-drawer>

【参考方案3】：

对我来说，问题在于我没有将 app 属性放在 v-navigation-drawer 上

我只是换了：<v-navigation-drawer absolute temporary ></v-navigation-drawer>

对于： <v-navigation-drawer absolute temporary app ></v-navigation-drawer>

app 的添加允许在我的v-navigation-drawer 上滚动