VuetifyJS - Скроллинг v-навигация-ящик

Question

Я новичок в VueJs и начал работать над своим первым проектом, который требует, чтобы у меня была боковая панель (ящик), чтобы она служила панелью навигации, и она всегда будет видна.

Пока все хорошо, все сделано и выглядит именно так, как я хотел.

Проблема в том, что каждый раз, когда я размещаю много ссылок, ящик не прокручивается, чтобы увидеть все ссылки, которые я там разместил.

Я пытался с CSS, но ничего не происходит. У кого-нибудь есть подсказка, что мне делать?

Мне просто нужно прокручивать ящик, когда ссылки превышают страницу или когда экран маленький.

Что я сделал, так это то, что я вложил свой ящик в блок с классом "прокручиваемый" и добавил ниже CSS:

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

Я также попробовал это, поскольку это было самое близкое, что я мог найти к моей проблеме

Answer 1

Я столкнулся с той же проблемой из-за ключевого слова absolute в v-navigation-drawer. Попробуйте удалить его, и он может сработать.

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

Answer 2

Ящики навигации должны быть прокручиваемыми, если вы добавите appвариант согласно документации

Однажды у меня все еще была проблема, когда я не мог добавить app вариант с ящиком, так как у меня было два ящика рядом.

Я просто добавил этот стиль в свой ящик, и это помогло:

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

Answer 3

Для меня проблема заключалась в том, что я не поместил атрибут в v-navigation-drawer

Я просто меняю: <v-navigation-drawer absolute temporary ></v-navigation-drawer>

Для: <v-navigation-drawer absolute temporary app ></v-navigation-drawer>

Добавление app разрешить прокрутку на моем v-navigation-drawer

Answer 4

Просто добавьте атрибут приложения в тег v-navigation-drawer.

      <v-navigation-drawer
 temporary
 app
 width="280"
 height="100vh"
>