How to customize scrollbar

Dash Python
1

How can I customize the scrollbars of my components? I dont want those standard scrollbars. Is there any way like write something to the style.css?
image

2

Hi @Varlor

I think you need to use a css file in the assets folder with the scroll bar styles:
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

1 Like
3

@Eduardo Ok lets assume i want to use simplebar. Where would i copy this? How would i reference it in specific dash components? If i just copy this to my stlye.css. The whole backgorund of my page changes but nothing happens to scrollbar. Here the simplebar:

body {
  padding: 2rem;
  background: #eee;
}

.area {
  background: white;
  height: 250px;
  overflow: auto;
}

.ss-wrapper {
    overflow : hidden;
    height   : 100%;
    position : relative;
    z-index  : 1;
    float: left;
}

.ss-content {
    height          : 100%;
    width           : 100%;
    padding         : 0 32px 0 0;
    position        : relative;
    right           : -18px;
    overflow        : auto;
    -moz-box-sizing : border-box;
    box-sizing      : border-box;
}

.ss-scroll {
  position            : relative;
  background          : rgba(0, 0, 0, .1);
  width               : 9px;
  border-radius       : 4px;
  top                 : 0;
  z-index             : 2;
  cursor              : pointer;
  opacity: 0;
  transition: opacity 0.25s linear;
}

.ss-container:hover .ss-scroll {
  opacity: 1;
}

.ss-grabbed {
     user-select: none;
     -o-user-select: none;
     -moz-user-select: none;
     -khtml-user-select: none;
     -webkit-user-select: none;
}
4

Hey @Varlor

You don’t need to reference anything.
Any css file in the assets folder will be automatically get by Dash and run into your code.
In this case the link I provided says that you could add different codes to manipulate different scrollbar components, for example if you want to modify the background you need to use:


::-webkit-scrollbar {
  background: red;
}

There is no need to add anything in your code, any scrollbar will have a red background.

5

hmm, if i just put this in my style.css in my assets folder, nothing happens. No red background for the scrollbars.

6

Hi @Varlor

I try using the examples, they work in the page but do not work in Dash, I really do not understand why, I allways take css from there and works in Dash. :thinking:

7

Hi,
Just add the component tag along with this and it works. something like this

div::-webkit-scrollbar {
  background: red;
}