javascript - Vuetify 在不需要时添加滚动条

Question

我用 vue-cli 创建了一个新项目，然后用 vue add vuetify 添加了 vuetify。打开网站看到a blank page with a useless scrollbar

我尝试在没有实际 App 组件的情况下安装应用程序，但问题仍然存在。只有当我删除 import './plugins/vuetify'

时它才会消失

主要.js

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Answer 1

只需将以下内容添加到您的 css 样式中:

html { overflow-y: auto }

这里解释了 vuetify 的默认行为(https://vuetifyjs.com/en/getting-started/frequently-asked-questions/#scrollbar-overflow):

Vuetify uses a slightly modified version of ress resetwhich by default turns on the html scrollbar to normalize behavior between browsers. This is a design choice and has been debated numerous times. There are pros and cons to having and not having it and as of now, the vote is in favor of leaving it as is. If you wish to disable this functionality, simply add html { overflow-y: auto } to your style file. Find more information on the CSS Reset page