How to make custom scrollbars show in all browsers

问题:

I am using a simple code for a color customized scrollbar:

<style type="text/css">  
<!--
BODY
{
    scrollbar-face-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #000000;
    scrollbar-darkshadow-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-arrow-color: #FF99FF;
    scrollbar-track-color: #FFCCFF;
}
-->
</style>

And it doesn't work in chrome, but it does in IE and not sure about other browsers. I am using chrome as my main browser, I have seen this issue on other websites as well but was wondering if there was any way around it?

There is a way to create semi-opacity divs/boxes that work in all browsers these days with special scripts, so was wondering if there was a solution like that for the scrollbars?

Thanks!

回答1:

Here have some plugins that works for all browsers:

1. http://jscrollpane.kelvinluck.com/
2. http://www.hesido.com/web.php?page=customscrollbar
3. http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/

回答2:

::-webkit-scrollbar {
    width: 15px;
    background:lightgray;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,1); 
    border-radius: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background:cyan;
} 

This will work in Chrome. Firefox doesn't support scroll styling. Hope it helps!

回答3:

scrollbar is not a CSS standard. In Chrome or Safari (WebKit) you can use the extension prefixed by -webkit- Read more here.

FireFox doesn't support scrollbar styling.

So probably you can support this effect in IE and WebKit browsers only, or use JavaScript libraries as Iwo Kucharski said.

回答4:

Those attributes will simply not work outside Internet Explorer. They are a somewhat bizarre Microsoft concoction that was never in any standard.

If you want to fake it, you'll need some Javascript. I don't think pure CSS will get you the effect.