Vuetify 在不需要时添加滚动条

Question

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

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

主文件

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 使用了ress reset 的一个稍微修改过的版本， 默认情况下它会打开 html 滚动条来规范浏览器之间的行为。这是一种设计选择，并已被多次辩论。拥有和不拥有它有利有弊，截至目前，投票赞成保持原样。如果您希望禁用此功能，只需添加html { overflow-y: auto }到您的样式文件中即可。在CSS 重置页面上查找更多信息

Answer 2

我在使用 vue-cli 3.8 + buefy 时遇到了同样的问题。

不是最好的解决方案，但这是我使用的两种方法：

全局隐藏滚动条

滚动条可以通过 CSS 样式隐藏。

<style>
html {
  overflow: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>

在特定视图中隐藏滚动条

我可以home.vue使用 DOM 样式隐藏滚动条。

<script>
  mounted: function() {
    let elHtml = document.getElementsByTagName('html')[0]
    elHtml.style.overflowY = 'hidden'
  },
  destroyed: function() {
    let elHtml = document.getElementsByTagName('html')[0]
    elHtml.style.overflowY = null
  }
</script>