Cannot remove scroll bar on Vuetify Navigation Drawer

Question

I've moved my nav panel into a v-navigation-drawer. I want to remove the scrollbar as there is content I want to always be visible. I've tried the various tips but the scrollbar is still there. How can I hide or get rid of it?

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

I've tried applying overflow: hidden to the nav drawer and to each elment below but still no joy.

Answer 1

The proper class declaration that worked for me is

<style scoped>
v::deep .v-navigation-drawer__content {
 overflow: hidden
}

</style>

Above is all I did
v::deep allows class to reach child components even with scoped property on

If you don't want to use v::deep, try removing the scoped property in your style tag

<style> <--- note without the scoped property
the scoped property prevent any class delcarations from reaching other components
In this case, since vuetify components are considered as separate component
scope tag will prevent your class delcaration take effect

Currently using vuetify 2.6.1

Note that the above works in removing scroll bar, but also disable user from scrolling with mouse wheel, so I resorted to method below.

<style scoped>
::v-deep ::-webkit-scrollbar {
  width: 0
  background: transparent
}

Doing this allows hiding of scroll bar while still enables scrolling
</style>

Please refer to here for detailed description on why. Hide scroll bar, but while still being able to scroll

Answer 2

Try this! This is work for me.

.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;
}

Let me know if you can make it! :)

Answer 3

Do not use 'scoped' in your style tag.

Answer 4

add extra class and you will be able to remove

<v-navigation-drawer class="hide-scrollbar">
</v-navigation-drawer>

.hide-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;

  /* Firefox */
  &::-webkit-scrollbar {
    display: none;
  }
}