CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
Karine
Karine

Reputation: 587

Adding custom scrollbars to part of a web page

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?

Upvotes: 0

Views: 2526

Answers (3)

danwellman
danwellman

Reputation: 9253

Using a jQuery scrollbar plugin would probably be quickest and easiest

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

Upvotes: 1

DBUK
DBUK

Reputation: 1373

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/

Upvotes: 2

Pops
Pops

Reputation: 30828

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.

Upvotes: 1

Related Questions