How can I change the scrollbar style in bootstrap?

Question

I am working with bootstrap 4. I would like to know if there is a way to change the scrollbar style. I just tried with webkit mode, but does not work.

The scrollbar style is browser specfic and nothing to do with Bootstrap. — Zim, Feb 08 '17 at 13:58
Dup of: http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div — Zim, Feb 08 '17 at 14:13
@ZimSystem i just tried with those methods, but i dont know why doesnt works — flipps, Feb 08 '17 at 14:25
They seem to work as expected: http://www.codeply.com/go/fLHwymIPdT — Zim, Feb 08 '17 at 14:30

score 13 · Answer 1 · edited Nov 28 '18 at 16:04

13

The following code will works for webkit

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

edited Nov 28 '18 at 16:04

Brad Larson

169,393
45
393
567

answered Feb 08 '17 at 14:09

Bhoot Biswas

163
6

score 6 · Answer 2 · edited Dec 08 '19 at 00:14

Bhoot's code above works, but I added a backgound-color for the thumb because I am using a dark background.

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color:#fff;
    -webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
}

score 3 · Answer 3 · answered Apr 09 '20 at 07:44

If you are trying on any div or elements for scroll bar customization, please assign and use element id in the CSS as below,

<div class="cardsContainer" id="cards-container">

#cards-container::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}


#cards-container::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(104, 140, 240, 0.3);
  }

#cards-container::-webkit-scrollbar-thumb {
    background-color: lightblue;
    outline: 1px solid slategrey;
}

The above way, it worked for me, even though it didn't work when I tried as follows,

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

How can I change the scrollbar style in bootstrap?

3 Answers3