VuetifyJS-滚动v导航抽屉

时间:2019-02-06 15:29:57

标签: vue.js scroll vuetify.js drawer

我是VueJs的新手,我开始从事我的第一个项目,该项目要求我有一个侧面板(抽屉)作为导航栏,并且始终可见。

到目前为止,一切都完成了,看起来完全符合我的要求。

问题是,每次我放置许多链接时,抽屉都不会滚动以查看我放置在其中的所有链接。

我已经尝试过使用CSS,但是没有任何反应。有人对我应该做什么有任何暗示吗?

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

我所做的是我将抽屉包含在具有“ scrollable”类的div中,并添加了以下CSS:

.scrollable{ height:100%; overflow:auto;}

我也尝试了this,因为这是我最能找到的解决问题的方法

2 个答案:

答案 0 :(得分:1)

如果您根据the documentation添加app选项,则导航抽屉应该是可滚动的

曾经有个问题,我无法将app选项添加到抽屉中,因为我有两个并排的抽屉。

我刚刚将这种样式添加到了抽屉中,就成功了:

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

答案 1 :(得分:0)

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

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