ansaurus

Question

Answer 1

+1 A:

you can't. as you can see here, this is only possible fpr IE5+ and Opera7.2+.

EDIT: with a bit of javascript it could be possible to build you own "html-scrollbars" that could be styled like you want them - but i don't think you should do that, writing this just to be detailed.

oezi 2010-10-08 12:37:14

Answer 2

+1 A:

Doing so is not as trivial as it would be with Internet Explorer or Opera. Firefox (and Chrome and Safari, as far as I know) only allow for the style of the scrollbar to be taken from the theme, which is a good thing. Lots of users don't like having the look and feel of interface widgets randomly changed because a designer though it would look cool. Changing the look of interface pieces can be even more of a problem for visually impaired people who maybe be using a high contrast theme.

That said, if the scrollbar is contained within a <div> in your page, you can create a custom scrollbar and make it functional with JavaScript or jQuery. This jQuery plugin looks like it would do the trick pretty nicely: http://jscrollpane.kelvinluck.com/

One last edit:

I think this is more or less what you want to do: http://martinsmucker.com/demo/scroller.html

Here's how it works:

We start the document with a doctype, <html> tag and a <head> as normal. Inside the head, we have to reference several stylesheets and scripts (which you've probably already downloaded from http://jscrollpane.kelvinluck.com/.

The head section is where a vast majority of the magic happens:

<!-- Styles -->
        <link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
        <style type="text/css">
            html, body {
                height: 100%;
                margin: 0;
                padding:0;
            }
            #container {
                height:100%;
                width:100%;
                margin: 0;
                padding:0;
                overflow: auto;
            }
        </style>

        <!-- Scripts -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
        <script type="text/javascript" src="jquery.mousewheel.js"></script>
        <script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.scroll-pane').jScrollPane();
            });
        </script>

This assumes that the css and js files are located in the same directory as your html file. We start by linking to the provided stylesheet. We then add a bit of custom CSS to prevent the normal scrollbars from showing by setting the margin and padding of html and body to 0. All of our content will be wrapped in a div with an id of "container". This container fills the page exactly (height: 100%; width:100%;) and it steals the scrolling so that we can customize the scrollbar (overflow: auto;).

Then we reference all of the appropriate scripts. Here I'm using the copy of jQuery hosted by Google, and again I'm assuming that all of the local scripts are in the same directory as the html file. The last little bit of jquery finds all of the divs with the "scroll-pane" class and adds the appropriate elements and scroll functionality to them.

After you've done this part, the html is then very simple.

<body>
    <div class="scroll-pane" id="container">
    All of your content for the page goes here.
    </div>
</body>

If you've done everything right, your page should look like my example.

mlms13 2010-10-08 12:44:20

i have tried jscroll pane by including files in my app

Rahul Mehta 2010-10-08 12:49:38

Rahul Mehta 2010-10-08 12:49:57

Rahul Mehta 2010-10-08 12:50:25

but it didn't work why ?

Rahul Mehta 2010-10-08 12:50:44

Have you also included the jQuery javascript library?

mlms13 2010-10-08 12:54:57

@Rahul, could you edit your original post to show the code as it currently looks in your website? I think that would be really helpful.

mlms13 2010-10-08 13:19:41

Answer 3

+1 A:

It is not possible directly via CSS.

But if you can use jQuery, jscrollpane may help you.

Nivas 2010-10-08 12:45:10

i have tried jscroll pane by including files in my app

Rahul Mehta 2010-10-08 12:52:03

Rahul Mehta 2010-10-08 12:52:20

Rahul Mehta 2010-10-08 12:53:42

You'll also need a `<script></script>` that points to the jScrollPane.js file (and before it, you'll need to make sure you're referencing the jQuery library). It might be helpful if you post a larger chunk of your code in the original question.

mlms13 2010-10-08 12:53:55

i have included the jquery file also

Rahul Mehta 2010-10-08 12:55:52

is i need to include jquerymousewheel file ?

Rahul Mehta 2010-10-08 12:57:43

Can you edit your question and post what you tried? It is difficult to read code in comments. Try posting logically complete block(s)

Nivas 2010-10-08 13:13:01

ansaurus

tags:

views:

answers:

scrollbar color change in firefox

related questions