Custom CSS Scrollbar for Firefox

    |
  • Added:
  • |
  • In: Wordpress

I want to custom-style a scrollbar with CSS.

I use this WebKit CSS code, which works well for Safari and Chrome:

::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } 

How can I do the same thing for Firefox?

(I know I can easily do it using jQuery, but I would prefer to do it with CSS if it's doable.)

Would be grateful for somebody's expert advice!

This Question Has 5 Answeres | Orginal Question | Dimitri Vorontzov

I thought I would share my findings in case someone is considering a JQuery plugin to do the job.

I gave JQuery Custom Scrollbar a go. It's pretty fancy and does some smooth scrolling (with scrolling inertia) and has loads of parameters you can tweak, but it ended up being a bit too CPU intensive for me (and it adds a fair amount to the DOM).

Now I'm giving Perfect Scrollbar a go. It's simple and lightweight (6KB) and it's doing a decent job so far. It's not CPU intensive at all (as far as I can tell) and adds very little to your DOM. It's only got a couple of parameters to tweak (wheelSpeed and wheelPropagation), but it's all I need and it handles updates to the scrolling content nicely (such as loading images).

P.S. I did have a quick look at JScrollPane, but @simone is right, it's a bit dated now and a PITA.

It works in user-style, and it seems not to work in web pages. I have not found official direction from Mozilla on this. While it may have worked at some point, Firefox does not have official support for this. This bug is still open https://bugzilla.mozilla.org/show_bug.cgi?id=77790

scrollbar { /* clear useragent default style*/ -moz-appearance: none !important; } /* buttons at two ends */ scrollbarbutton { -moz-appearance: none !important; } /* the sliding part*/ thumb{ -moz-appearance: none !important; } scrollcorner { -moz-appearance: none !important; resize:both; } /* vertical or horizontal */ scrollbar[orient="vertical"] { color:silver; } 

check http://codemug.com/html/custom-scrollbars-using-css/ for details.

@-moz-document url-prefix(http://),url-prefix(https://) { scrollbar { -moz-appearance: none !important; background: rgb(0,255,0) !important; } thumb,scrollbarbutton { -moz-appearance: none !important; background-color: rgb(0,0,255) !important; } thumb:hover,scrollbarbutton:hover { -moz-appearance: none !important; background-color: rgb(255,0,0) !important; } scrollbarbutton { display: none !important; } scrollbar[orient="vertical"] { min-width: 15px !important; } } 

There's no Firefox equivalent to ::-webkit-scrollbar and friends.

You'll have to stick with JavaScript.

Plenty of people would like this feature, see: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

This report is asking for the exact same thing you're asking for: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

It was closed as a duplicate of the first report I linked to.


As far as JavaScript replacements go, you can try:

May I offer an alternative?

No scripting whatsoever, only standardized css styles and a little bit of creativity. Short answer - masking parts of the existing browser scrollbar, which means you retain all of it's functionality.

.scroll_content { position: relative; width: 400px; height: 414px; top: -17px; padding: 20px 10px 20px 10px; overflow-y: auto; } 

For demo and a little bit more in-depth explanation, check here...

jsfiddle.net/aj7bxtjz/1/


Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

NEED HOSTING?
Are you searching for Good Quality hosting?
You can Try It!
Connect Social With PHPAns
Top