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

Did you eventually find a working one? – Wildan Maulana Syahidillah Oct 05 '18 at 04:05 — Wildan Maulana Syahidillah, Oct 05 '18 at 04:05
@WildanMaulanaSyahidillah , Please see the below answer . – Bujji Oct 05 '18 at 12:39 — Bujji, Oct 05 '18 at 12:39

score 2 · Accepted Answer · answered Oct 05 '18 at 11:39

2

https://codepen.io/anon/pen/gBMjBM

changes:

wrap 'v-list' (element that cause overflow) into your v-bar element
removed vue from libraries list
one row in css

css:

.vuebar-element  {
    height: 100%;

answered Oct 05 '18 at 11:39

user1852788

4,278
26
25

Thank You @user1852788 for your answer – Bujji Oct 05 '18 at 12:42
What do you mean by removed vue from libraries list? – Wildan Maulana Syahidillah Oct 08 '18 at 01:45
there was double include of vue library: in html section and in "Settings->Javascript->External Scripts/Pens" – user1852788 Oct 08 '18 at 06:08
I've tried all this... but all it does is remove the default scrollbar – Robin Hood Nov 23 '20 at 10:01

score 1 · Answer 2 · answered Jun 14 '20 at 12:28

1

I am directly modifying the source code.

Under the path:
node_modules\vuetify\src\components\VNavigationDrawer

//directly modify the scrollbar style you want.
.v-navigation-drawer__content
  height: 100%
  overflow-y: auto
  overflow-x: hidden !important
  &::-webkit-scrollbar
    width: 1px                                        
  &::-webkit-scrollbar-thumb
    background: black                                 
    border-radius: 20px

answered Jun 14 '20 at 12:28

Kevin

303
3
9

.v-navigation-drawer__content height: 100% overflow-y: auto overflow-x: hidden !important &::-webkit-scrollbar width: 1px &::-webkit-scrollbar-thumb background: black border-radius: 20px – Kevin Jun 14 '20 at 12:29

score 1 · Answer 3 · answered Aug 08 '21 at 19:33

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>

Vuetify Custom Scrollbar

3 Answers3