无法删除 Vuetify 导航抽屉上的滚动条

Posted 2023-02-23

【中文标题】无法删除 Vuetify 导航抽屉上的滚动条

【英文标题】：Cannot remove scroll bar on Vuetify Navigation Drawer

【发布时间】：2021-04-23 01:47:39

【问题描述】：

我已将导航面板移动到 v-navigation-drawer 中。我想删除滚动条，因为有我希望始终可见的内容。我已经尝试了各种提示，但滚动条仍然存在。我该如何隐藏或摆脱它？

<v-navigation-drawer
  v-model="mainNavDrawer"
  fixed
  app
  clipped
  enable-resize-watcher
  
  class="pa-0"
  mobile-break-point="1600"
  ><v-layout class="primary ma-0 pa-2 pt-1 d-xl-none">
    <v-toolbar-title class="pa-1 white--text font-weight-bold"
      >Knight Shop Invoice EasyPay</v-toolbar-title
    >
    <v-spacer></v-spacer>
    <v-btn
      x-small
      class="mt-2 pa-3"
      color="primary lighten-5"
      dark
      outlined
      @click.stop="mainNavDrawer = !mainNavDrawer"
    >
      <v-icon dark left> mdi-arrow-left </v-icon>Close
    </v-btn></v-layout
  >
  <v-container fluid class="py-0">
    <v-row>
      <v-col class="px-0 py-0" sm="12">
        <v-container class="pt-0">
          <v-row>
            <v-col sm="12" class="px-2">
              <TogglePOType />
            </v-col>
          </v-row>
          <transition name="slide-fade">
            <v-row v-show="this.selectedInvoiceStatus === 'needapproval'">
              <v-col sm="12" class="py-0">
                <RegionGraph : />
              </v-col> </v-row
          ></transition>
          <v-row>
            <v-col sm="12" class="pa-0 pt-2">
              <SelectVendors />
            </v-col>
          </v-row>
        </v-container>
      </v-col>
    </v-row>
  </v-container>
</v-navigation-drawer>

。 . .

<style scoped>
.v-navigation-drawer__content 
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;

</style>

我尝试将溢出：隐藏到导航抽屉和下面的每个元素，但仍然没有乐趣。

【参考方案1】：

不要在样式标签中使用“作用域”。

【参考方案2】：

试试这个！这对我有用。

.v-navigation-drawer__content::-webkit-scrollbar-track
  -webkit-box-shadow: inset 0 0 6px #5d5d5d;
  background-color: #5d5d5d;

.v-navigation-drawer__content::-webkit-scrollbar
  width: 0px;

.v-navigation-drawer__content::-webkit-scrollbar-thumb
  -webkit-box-shadow: inset 0 0 6px #424242;
  background-color: #424242;

如果你能做到，请告诉我！ :)