Vuetify adds scrollbar when it's not needed

问题

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

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

回答1:

I have the same problem using vue-cli 3.8 + buefy.

Not the best solution, but here's the two ways I'm using :

Hide scrollbar globally

Scrollbar can be hidden by CSS style.

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

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

Hide scrollbar in a specific views

I could hide scrollbar in a home.vue using DOM style.

<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>

来源：https://stackoverflow.com/questions/56973002/vuetify-adds-scrollbar-when-its-not-needed