Search code examples
cssscrollbar

Multiple custom scrollbars

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..

Solution

  • 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/