customizing vertical scrollbar with css/jquery

Question

I have a div as <div id="content"> with some <p> tags within it. I am setting the style for div as follows:

#content{
     height:200px;
     overflow-y:scroll;
}

Is there a way I can customize the scrollbar. I mean I want to change the scrollbar color as well as its background.

Alp · Accepted Answer · 2011-06-07 17:35:01Z

1

There is no valid cross-browser code, which is capable of coloring the scrollbars. You should respect the UI configuration of the users who are visiting your page.

Maybe you want to have jQuery scrollbars, which are fully customizable: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

answered Jun 7, 2011 at 17:35

Alp

29.8k29 gold badges123 silver badges204 bronze badges

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

Comments

Kraz · Accepted Answer · 2011-06-07 17:34:38Z

0

Scrollbars are generated through the OS and you have little control over them.

It's why people have made custom scrollbar, generated in javascript.

There are a lot of ressource for the little customizing you can do, just google it.

IIRC, you can only modify IE scrollbars via stuff like

scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f;

answered Jun 7, 2011 at 17:34

Kraz

7,1086 gold badges44 silver badges72 bronze badges

Collectives™ on Stack Overflow

customizing vertical scrollbar with css/jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related