Vuetify 在不需要时添加滚动条 [英] Vuetify adds scrollbar when it's not needed

问题描述

我用 vue-cli 创建了一个新项目，然后用 vue add vuetify 添加了 vuetify.打开网站，看到一个带有无用滚动条的空白页面

I created a new project with vue-cli, then added vuetify with vue add vuetify. Opened the site and saw a blank page with a useless scrollbar

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

I tried mounting app without actually App component, but the problem still exists. It vanishes only when I remove import './plugins/vuetify'

main.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')

推荐答案

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

Just add the following to your css style :

html { overflow-y: auto }

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

This default behaviour of vuetify is explained here (https://vuetifyjs.com/en/getting-started/frequently-asked-questions/#scrollbar-overflow):

Vuetify 使用了 ress reset 的略微修改版本默认情况下，它会打开 html 滚动条以规范浏览器之间的行为.这是一种设计选择，并已被多次辩论.拥有和不拥有它有利有弊，截至目前，投票赞成保持原样.如果您想禁用此功能，只需将 html { overflow-y: auto } 添加到您的样式文件.在CSS 重置页面

Vuetify uses a slightly modified version of ress reset which 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

这篇关于Vuetify 在不需要时添加滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！