Vuetify Custom Scrollbar

Question

I tried different custom scrollbars for Vuetify but failed . Here is one of them which I tried ( I tried it for v-navigation-drawer )

Vuejs Custom scroll bar https://github.serafin.io/vuebar/#installation

Vuejs Custom scroll bar working example https://jsfiddle.net/u94ns8jc/1/?utm_source=website&utm_medium=embed&utm_campaign=u94ns8jc

Vuetify example which is not working https://codepen.io/kiranvasi/pen/jxEJqB

  <v-navigation-drawer
      :mini-variant.sync="miniVariant"
      :clipped="clipped"
      v-model="drawer"
      fixed
      app  v-bar
      class="el1"
   >

Could any one please let me know if you guys are able to make any custom scroll bar for Vuetify ? Thank You

Answer 1

Honestly, don't stress yourself. Just use only CSS and give yourself rest

Check out fiddle https://jsfiddle.net/L3d2tspy/

<style>
  /* width */
  ::-webkit-scrollbar {
    width: 5px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #ff2929;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(255, 219, 219);
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
</style>