Multiple custom scrollbars

Question

All I want to know is if it is possible to have multiple custom made -webkit-scrollbars on the same page.. I making some divs color specific, like one div has green text and images and another blue etc. So I would like to make a custom scrollbar for each div so it matches the color..

Q1: Is it possible?

Q2: If so, how would I do it?

I have thought about one solution, but I think it is a bit cumbersome. One solution may be to make each div containing an iframe and then create separate pages with the unique scrollbars, but I don't know if that is going to work either..

look at this question http://stackoverflow.com/questions/7743840/apply-webkit-scrollbar-style-to-specified-element — polybios, Mar 10 '13 at 17:53

score 6 · Accepted Answer · answered Mar 10 '13 at 18:03

Of course you can - simply prepend the scrollbar pseudo-classes with your intended selectors, i.e.:

::-webkit-scrollbar-track {
    background-color: #333;
}

/* Override styles for <div>s, for example */
div::-webkit-scrollbar-track {
    background-color: #b13131;
}

I have made a simple example for you here - http://jsfiddle.net/teddyrised/Nsz93/

score 2 · Answer 2 · answered Dec 18 '14 at 06:04

You can also apply these rules by id of the element. Let's say scroll bar of a div has to be styled which has an id "myDivId". Then you can do following. This way you can use different styles for scroll bars of different elements.

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

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

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

http://jsfiddle.net/QcqBM/516/

score 0 · Answer 3 · answered Mar 10 '13 at 17:52

It's possible using either a jquery plugin or simply styling the scrollbars w/ css. This can be done in webkit and ie.

::-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); 
}

http://jsfiddle.net/jeffpowrs/nEkPw/

http://css-tricks.com/custom-scrollbars-in-webkit/

Already know how to make a custom -webkit-scrollbar.. just didn't know how to make multiple different.. — Corfitz., Mar 10 '13 at 18:19

score 0 · Answer 4 · answered Apr 27 '22 at 04:43

Here's the solution

div::-webkit-scrollbar {
width: 0.5em;
border-radius: 5px;
 }
 div::-webkit-scrollbar-track {
 box-shadow: inset 0 0 6px #f8fbff;
 border-radius: 5px;
 }

div::-webkit-scrollbar-thumb {
background-color: #9fa9bd;
border-radius: 5px;
}

Multiple custom scrollbars

4 Answers4

Linked