Vuetify adds scrollbar when it's not needed

Question

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

Answer 1

Just add the following to your css style :

html { overflow-y: auto }

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

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

Answer 2

What worked for me is using the overflow-hidden class. You can even do overflow-[x|y]-hidden to be specific. I added it my main layout like <Nuxt class="overflow-x-hidden".

Or without Nuxt, in App.vue: <v-main class="overflow-hidden">

Answer 3

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>