Custom Scrollbars

[iwgalloway]

Hi - I have very little experience in Javascript.

I have a div which has a long list of links within it. I'd like to add a custom scrollbar to the side, which will then scroll the links within the height of the div..

I can add a basic scrollbar using "overflow:scroll" in CSS, but I've been told that the only way I can customise my scrollbar [that is, make my own arrow and bar images] is to use Javascript, though I haven't really a clue where to start

Any help appreciated

thanks

 

[cLFlaVA]

you can make it look fancy using CSS, but you won't get cross-browser support. you would potentially need to create a custom scrollbar utilizing html, css and javascript. to me, it doesn't seem worth it.



*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[GaryCam]

Put the following code in your page's header to customize the colors of the scrollbar. Works in IE. As for actually designing new scrollbar elements, I don't know.


<style type="text/css">
<!--
body{
scrollbar-face-color:#994F53;/*this is the color of the "face"--the main color of the scrollbar itself and the arrow buttons*/
scrollbar-track-color:#E9E9B4;/*this is the color of the "track" that the scrollbar rides on (underneath the scrollbar)*/
scrollbar-arrow-color:#FFFFFF;/*this is the arrow color*/
scrollbar-shadow-color:#7B2C53;/*this is the inner bottom/right border color*/
scrollbar-darkshadow-Color:#710038;/*this is the outer bottom/right border color*/
scrollbar-highlight-color:#CBA3B7;/*this is the inner top/left border color*/
scrollbar-3dlight-color:#CCCCCC;/*this is the outer top/left border color*/
}
-->
</style>

Good luck,
Gary

 

[cLFlaVA]

i would remove those comment tags from your style definition.



*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

(the outer ones)



*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]