【问题标题】:Cannot remove scroll bar on Vuetify Navigation Drawer无法删除 Vuetify 导航抽屉上的滚动条
【发布时间】:2021-04-23 01:47:39
【问题描述】:

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

<v-navigation-drawer
  v-model="mainNavDrawer"
  fixed
  app
  clipped
  enable-resize-watcher
  width="475"
  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 :height="200" />
              </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>

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

【问题讨论】:

    标签: vue.js vuetify.js


    【解决方案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;
      }
      

      如果你能做到,请告诉我! :)

      【讨论】:

        猜你喜欢
        • 2019-02-22
        • 2021-12-14
        • 2019-01-09
        • 2019-06-05
        • 1970-01-01
        • 2021-05-12
        • 2020-06-19
        • 2020-01-16
        • 2019-08-11
        相关资源
        最近更新 更多