Styling Browser Scrollbar

Question

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.

score 10 · Answer 1 · edited May 23 '17 at 10:34

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.

A comment along with negative votes for a seven year old post is appreciated. The content in this post is still very valid today. — Arve Systad, Oct 06 '16 at 12:08

score 8 · Accepted Answer · edited May 28 '13 at 18:28

8

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.

edited May 28 '13 at 18:28

George Cummins

28,485
8
71
90

answered Jun 07 '09 at 14:38

Pool

11,999
14
68
78

Nice, I'm already running JQuery, using a plugin can reduce maintenance. – Adrian Godong Jun 09 '09 at 16:58

score 6 · Answer 3 · answered Jun 07 '09 at 07:29

6

WebKit supports another mechanism.

answered Jun 07 '09 at 07:29

Ms2ger

15,596
6
36
35

RichieHindle · Answer 4 · 2009-06-06T21:35:57.120

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-)

score 2 · Answer 5 · answered Jun 07 '09 at 15:08

2

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

answered Jun 07 '09 at 15:08

Ballsacian1

17,214
2
26
25

Nice! I don't know who downvoted you, irresponsible dude there. +1 – Adrian Godong Jun 08 '09 at 18:40
Well thanks for the upvote. I still think my answer is 'the answer' but whatever. It seems like every other answer just says don't do it, or only works in browser x. Nick and I know whats up. – Ballsacian1 Jun 08 '09 at 22:07

score 0 · Answer 6 · answered Jun 07 '09 at 14:23

0

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

answered Jun 07 '09 at 14:23

knittl

246,190
53
318
364

Styling Browser Scrollbar

6 Answers6

Linked