Question

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

我尝试安装实际上没有App组件的应用程序，但是问题仍然存在。仅当我移除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

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

html { overflow-y: auto }

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

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>

将滚动条隐藏在特定视图中

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

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

Answer 3

添加以下样式对我有用

subscriber.email = self.cleaned_data.get('email')
subscriber.address = self.cleaned_data.get('address')

Here 是一个解释它的页面

Vuetify在不需要时添加滚动条

3 个答案:

全局隐藏滚动条

将滚动条隐藏在特定视图中