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

cssscrollbar


Solution 1:[1]

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/

Solution 2:[2]

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/

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pratik Patel
Solution 2 Jeffpowrs
Solution 3 Raheel Sajjad

Related Questions