Styling: :-Webkit-Scrollbar-Track Not Working

Styling ::-webkit-scrollbar-track not working

Try the following snippet for styling your scrollbar.

Note: This only works on -webkit browsers like chrome, safari
because there are not W3C standard for CSS and therefore most browsers
just ignore them.

div {  width: 400px;  height: 150px;  overflow: auto;}
div::-webkit-scrollbar-track {  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);  border-radius: 10px;  background-color: #F5F5F5;}
div::-webkit-scrollbar {  width: 12px;  background-color: #F5F5F5;}
div::-webkit-scrollbar-thumb {  border-radius: 10px;  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);  background-color: #555;}

<div>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, nunc ut porta euismod, purus leo suscipit ante, quis hendrerit sem velit ut tellus. Aenean justo lorem, viverra tristique malesuada quis, rhoncus sodales turpis. Donec a tempus felis.  Morbi faucibus eros nec leo facilisis lacinia. Nam at erat ac augue semper ultricies vitae nec erat. Donec et dapibus felis, vitae placerat magna. Aliquam non magna nec orci scelerisque lobortis.  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, nunc ut porta euismod, purus leo suscipit ante, quis hendrerit sem velit ut tellus. Aenean justo lorem, viverra tristique malesuada quis, rhoncus sodales turpis. Donec  a tempus felis. Morbi faucibus eros nec leo facilisis lacinia. Nam at erat ac augue semper ultricies vitae nec erat. Donec et dapibus felis, vitae placerat magna. Aliquam non magna nec orci scelerisque lobortis.</div>

Issue with custom webkit scrollbar

Thanks to a guy in my team, we managed to solve the issue by adding the background to webkit scrollbar track.

Webkit Scrollbar Error

You might have to load that scrollbar styling code from a separate stylesheet. Move it over to a new file, lets say scrollbars.css, and attach this code to your JavaScript:

var userAgent = navigator.userAgent.toLowerCase();

if (userAgent.search('iphone') == -1 && userAgent.search('ipod') == -1)
{
  $('head').append('<link rel="stylesheet" href="scrollbars.css" type="text/css" />');
}

---

In your site, you have these styles in the main page:

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 10px;
}

::-webkit-scrollbar-button:vertical:increment {
    background-color: #fff;
}

::-webkit-scrollbar-track-piece {
    background-color: #eee;
    -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: #ccc;
    -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background-color: #ccc;
    -webkit-border-radius: 3px;
}

...

Take them and copy them over to a new file called scrollbars.css. Now, delete those old ones from your site completely. The JavaScript loads the scrollbar CSS file automagically.

Style webkit scrollbar on certain state

Changing the background color works just fine for me.

http://jsfiddle.net/QcqBM/1

div#container:hover::-webkit-scrollbar {
    background: lightyellow;
}

Are you sure there isn't something else wrong with your CSS call?

How to style in-page scrollbar without changing browser scrollbar?

Add the class .scroll before the -webkit code

.scroll::-webkit-scrollbar {
    width: 16px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

.scroll::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: #ADADAD;
}

.scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}

---

Related Topics