Get the color of scrollbar

Question

I have a div box with a custom vertical scrollbar and I have designed a horizontal scrollbar using css/jquery. I need to give the exact look to the designed scrollbar esp the color. is there any jquery/javascript code which I can use to get the color of custom scrollbar.

http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div — Mukul Kant, Oct 01 '14 at 05:34

score 1 · Answer 1 · answered Oct 01 '14 at 06:05

:-webkit-scrollbar {
    width: 1em;

}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #989898);
}

::-webkit-scrollbar-thumb {
background: -moz-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(210,106,120,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(210,106,120,1)), color-stop(100%, rgba(153,218,255,0))); /* safari4+,chrome */
background: -webkit-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(210,106,120,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(210,106,120,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(210,106,120,1) 100%); /* ie10+ */
background: linear-gradient(0deg, rgba(153,218,255,0) 0%, rgba(210,106,120,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d26a78', endColorstr='#99DAFF',GradientType=0 ); /* ie6-9 *///outline: 1px solid #D17626;
  border-radius:5px;
}

Am actually looking to get the color of custom windows scroll bar and not set color — Nitesh Oswal, Oct 01 '14 at 17:05

score 0 · Answer 2 · answered Oct 01 '14 at 05:40

through css you can set only -webkit supported browser because firefox dosnt support scrollbar css to achieve in all browser by using plugins like nicescroll and others

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

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

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background:#c0a062;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background:#c0a062; 
}

Get the color of scrollbar

2 Answers2