Styling Browser Scrollbar

问题:

I saw this years before, but since it was not widely supported, websites are dropping usage of it.

I am currently designing a website which will have scrollbars inside the design and wondering whether CSS2 have any specification on styling browser scrollbars because the default colours don't fit. If there's no specification, any reference to specific browser behaviour would be appreciated.

If there's no CSS specification on it, I would have to rely on a custom generated scrollbar using JS. References on how to build one is also appreciated.

回答1:

A JavaScript solution can be found at http://www.hesido.com/web.php?page=customscrollbar. Note that you do have to pay for this, but even if you don't want to go that route it shows what is possible.

Otherwise a jQuery solution and a Prototype solution are also available.

回答2:

I quote myself from this thread, since it's related:

From a usability point of view, changing scroll bars is a no-go. The user is familiar with his/her operating system and the visual environment it provides. Changing this does create confusion, especially among those who are new to using computers, old people etc.

The majority of users today will probably recognize a scroll bar as long as it has it's basic shape - and many will not even use the bar itself, but just the scroll wheel on the mouse.

It's still a thing to think about though. Consider your audience. And whatever you do make sure it actually works on all platforms/in all browsers if you use a custom scroll bar.

回答3:

WebKit supports another mechanism.

回答4:

You can do it like this:

<style>
body {
    scrollbar-face-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-3dlight-color: #000000;
    scrollbar-arrow-color: #000000;
    scrollbar-track-color: #000000;
    scrollbar-darkshadow-color: #000000;
}
</style>

but it only works in Internet Explorer and Opera (thanks, Julien!). And you might want to use different colours. 8-)

回答5:

I haven't gotten around to trying these solutions, but they do look very promising and are claimed to degrade nicely.

This would be my first choice
http://www.hesido.com/web.php?page=customscrollbar

http://www.n-son.com/scripts/jsScrolling/new/example5.html

回答6:

many browsers support some sort of styling the scrollbars, but nothing of it is standardised in css.

also, as arve systad said, changing such basic widgets of the OS is a no-go—though one should be careful with changing buttons then too