css - 如何去除 Nuxt + vuetify 中的滚动条？

Question

我基本上想删除滚动条：

在 Vuetify 上，他们说要使用

html { overflow-y: auto }

但是在 Nuxt 这不起作用？

如果有人知道我将不胜感激。

我的代码：布局/default.vue

<template>
 <v-app dark>
   <v-main>
     <nuxt />
   </v-main>
 </v-app>
</template>

<script>
export default {

}
</script>

<style scoped>
html { overflow-y: auto } // <=== doesn't work

.page-enter-active,
.page-leave-active {
 transition: opacity 0.5s;
}
.page-enter,
.page-leave-to {
 opacity: 0;
}
</style>

标签： cssnuxt.jsvuetify.js

Answer 1

overflow: auto仅当内容高度小于容器高度时才隐藏滚动条，您需要使用 CSS/SCSS 设置带有display: none属性的滚动条样式。

您可以使用选择器设置滚动条的样式::webkit-scrollbar、更改颜色、宽度和高度，或者只是添加display: none以隐藏它。但是，它存在兼容性问题，它几乎可以在除 Mozilla 之外的所有地方使用。相反，Mozilla 使用scrollbar-color, scrollbar-width.

这是文档：

• ::webkit-scrollbar https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
• 滚动条颜色https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars