Vue3项目中Vuetify 3.4.7默认显示空滚动条求助

针对启动项目后出现无法消除的空滚动条问题，可尝试以下几种解决方案：

1. 使用Vuetify根容器组件<v-app> #

Vuetify的布局体系需要以<v-app>作为根容器来规范页面布局、处理默认样式与滚动行为。修改你的App.vue：

<template>
  <v-app>
    <Navbar />
  </v-app>
</template>

<script>
import Navbar from "@/components/Navbar.vue";

export default {
  name: "App",
  components: {
    Navbar,
  },
};
</script>

<style lang="scss"></style>

2. 添加全局样式重置 #

在App.vue的样式中添加全局重置规则，消除默认边距或溢出：

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}
</style>

3. 调整Vuetify全局配置 #

在创建Vuetify实例时，修改全局默认配置，禁用不必要的滚动行为：

// main.js
const vuetify = createVuetify({
  components,
  directives,
  defaults: {
    global: {
      scrollable: false,
    },
  },
})

以上方法中，优先尝试第一种——使用<v-app>，这是Vuetify官方推荐的页面结构规范，大部分布局相关的样式问题都能通过这个方式解决。

内容的提问来源于stack exchange，提问作者tmoyses