Adding custom scrollbars to part of a web page

Question

I want to create a special place where I show a picture. It should have scroll bars (both horizontal and vertical) that look like this:

thin gray scrollbar with small blue oval slider

How can I get this look? Can I do it with an iframe? With a div?

Would'nt we all like a special place of our own!

adeneo
– adeneo

2011-12-01 18:44:48 +00:00
Commented Dec 1, 2011 at 18:44 — adeneo
– adeneo, Commented Dec 1, 2011 at 18:44

DBUK · Accepted Answer · 2011-12-02 09:08:55Z

2

Just thought I better add the CSS3 option, although this won't work is some browsers so jQuery is probs your best bet.

Some info on CSS3 scrollbars:

http://css-tricks.com/9130-custom-scrollbars-in-webkit/

answered Dec 2, 2011 at 9:08

DBUK

1,3731 gold badge23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

danwellman · Accepted Answer · 2015-02-21 22:26:36Z

1

Using a jQuery scrollbar plugin would probably be quickest and easiest

The jQuery UI one is very easy to use and easy to skin

edited Feb 21, 2015 at 22:26

answered Dec 1, 2011 at 18:22

danwellman

9,4018 gold badges65 silver badges92 bronze badges

2 Comments

Karine Over a year ago

Thanks, but no one has the same look :(. I should slice a psd file with exactly the same look.

danwellman Over a year ago

But the look is just styling, that's what I mean about the jQuery UI one being easy to skin - you can make it look how you want using CSS

Pops · Accepted Answer · 2011-12-01 18:24:05Z

1

This is not something you can do with HTML or CSS. If you're willing to use jQuery, Flash, &c., then you have numerous options, but that seems out of scope based on your tags.

Some versions of IE (5.5 - 8, not sure about 9) allow pages to set custom colors for scrollbar components using CSS, like this:

body {
    scrollbar-base-color: #000000;
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-DarkShadow-Color: #888888;
}

However, that is non-standard and doesn't allow for the degree of customization you want.

answered Dec 1, 2011 at 18:24

Pops

31k37 gold badges139 silver badges153 bronze badges

1 Comment

Karine Over a year ago

I add jquery and javascript tags as well :))

Collectives™ on Stack Overflow

Adding custom scrollbars to part of a web page

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related