treehouse : what would you like to learn today?
Web Design Web Development iOS Development

CSS scrollbars in Firefox

  • I want to customize my scrollbars so I can blend them into the art on the screen. The CSS examples I have found work only in IE. Firefox and Safari do not handle them (at least on a MAC). I'm downloading both for XP now.

    Is it possible to do this just with CSS or do I have to involve AJAX or javascript. CSS makes things so easy and I'm trying to keep it as simple as possible.


    scrollbar-arrow-color: #FF3300;
    scrollbar-3dlight-color: #FF6633;
    scrollbar-highlight-color: #FF9933;
    scrollbar-face-color: #FF9900;
    scrollbar-shadow-color: #FF6633;
    scrollbar-darkshadow-color: #FF0033;
    scrollbar-track-color: #FF6600;

    Thanks,
    Jeff
  • I'm pretty sure there is no way to change the default styling for the scrollbar in most browsers. That comes in as a system-level thing and can't be tampered with at the browser-level. I didn't even know IE offered a way to do that...

    You can, however, make scrollable areas with Javascript, so you could potentially make an area as wide and tall as the browser window that hides overflow and does javascript scrolling. A quick search turned up an example like this:

    http://www.n-son.com/scripts/jsScrollin ... mple1.html

    But I know I've seen examples with draggable handles as well. So really, you could make it happen with fully designed up scrollbars.
  • Cool example! :)
  • You used to be able to color scrollbars: (windows 5.5+ )

    you used:

    scrollbar-face-color: #hex code;
    scrollbar-shadow-color: #hex code;
    scrollbar-highlight-color: #hex code;
    scrollbar-3dlight-color: #hex code;
    scrollbar-darkshadow-color:#hex code;
    scrollbar-track-color: #hex code;
    scrollbar-arrow-color: #hex code;

    not sure if these work still but you could have a go.

    If not JS is the way ahead.

    edit to add these links http://www.sean.co.uk/a/webdesign/color_scrollbar_maker_ie.shtm

    or http://www.designplace.org/tutorials.php?page=1&c_id=11
  • Its very easy to use the jquery plugin (jscrollpane) to customize your scrollbar as per your wish.