Custom CSS Scrollbar for Firefox
Solution 1
As of late 2018, there is now limited customization available in Firefox!
See these answers:
And this for background info: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
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
As far as JavaScript replacements go, you can try:
- https://github.com/mdbootstrap/perfect-scrollbar
- https://github.com/Grsmto/simplebar
- https://github.com/vitch/jScrollPane
Solution 2
Firefox 64 adds support for the spec draft CSS Scrollbars Module Level 1, which adds two new properties of scrollbar-width
and scrollbar-color
which give some control over how scrollbars are displayed.
You can set scrollbar-color
to one of the following values (descriptions from MDN):
-
auto
Default platform rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties. -
dark
Show a dark scrollbar, which can be either a dark variant of scrollbar provided by the platform, or a custom scrollbar with dark colors. -
light
Show a light scrollbar, which can be either a light variant of scrollbar provided by the platform, or a custom scrollbar with light colors. -
<color>
<color>
Applies the first color to the scrollbar thumb, the second to the scrollbar track.
Note that dark
and light
values are not currently implemented in Firefox.
macOS notes:
The auto-hiding semi-transparent scrollbars that are the macOS default cannot be colored with this rule (they still choose their own contrasting color based on the background). Only the permanently showing scrollbars (System Preferences > Show Scroll Bars > Always) are colored.
Visual Demo:
.scroll {
width: 20%;
height: 100px;
border: 1px solid grey;
overflow: scroll;
display: inline-block;
}
.scroll-color-auto {
scrollbar-color: auto;
}
.scroll-color-dark {
scrollbar-color: dark;
}
.scroll-color-light {
scrollbar-color: light;
}
.scroll-color-colors {
scrollbar-color: orange lightyellow;
}
<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>
<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>
<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>
<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>
You can set scrollbar-width
to one of the following values (descriptions from MDN):
-
auto
The default scrollbar width for the platform. -
thin
A thin scrollbar width variant on platforms that provide that option, or a thinner scrollbar than the default platform scrollbar width. -
none
No scrollbar shown, however the element will still be scrollable.
You can also set a specific length value, according to the spec. Both thin
and a specific length may not do anything on all platforms, and what exactly it does is platform-specific. In particular, Firefox doesn't appear to be currently support a specific length value (this comment on their bug tracker seems to confirm this). The thin
keywork does appear to be well-supported however, with macOS and Windows support at-least.
It's probably worth noting that the length value option and the entire scrollbar-width
property are being considered for removal in a future draft, and if that happens this particular property may be removed from Firefox in a future version.
Visual Demo:
.scroll {
width: 30%;
height: 100px;
border: 1px solid grey;
overflow: scroll;
display: inline-block;
}
.scroll-width-auto {
scrollbar-width: auto;
}
.scroll-width-thin {
scrollbar-width: thin;
}
.scroll-width-none {
scrollbar-width: none;
}
<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>
<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>
<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>
Solution 3
Since Firefox 64, is possible to use new specs for a simple Scrollbar styling (not as complete as in Chrome with vendor prefixes).
In this example is possible to see a solution that combine different rules to address both Firefox and Chrome with a similar (not equal) final result (example use your original Chrome rules):
The key rules are:
For Firefox
.scroller {
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}
For Chrome
.scroller::-webkit-scrollbar {
width: 15px;
height: 15px;
}
.scroller::-webkit-scrollbar-track-piece {
background-color: #C2D2E4;
}
.scroller::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}
Please note that respect to your solution, is possible to use also simpler Chrome rules as the following:
.scroller::-webkit-scrollbar-track {
background-color: #C2D2E4;
}
.scroller::-webkit-scrollbar-thumb {
height: 30px;
background-color: #0A4C95;
}
Finally, in order to hide arrows in scrollbars also in Firefox, currently is necessary to set it as "thin" with the following rule scrollbar-width: thin;
Solution 4
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...
Solution 5
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 (6 KB) 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.
Dimitri Vorontzov
Updated on July 08, 2022Comments
-
Dimitri Vorontzov almost 2 years
I want to customize 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 in Firefox?
I know I can easily do it using jQuery, but I would prefer to do it with pure CSS if it's doable.
-
Dimitri Vorontzov almost 13 yearsThank you, ThirtyDot. One question though: what about -moz-appearance:scrollbartrack-vertical - and other related CSS extensions? Perhaps they can be used in some way?
-
thirtydot almost 13 yearsNo. Unfortunately, none of the possible values for
-moz-appearance
can help."The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme."
- you'll just get a native scrollbar. -
Dimitri Vorontzov almost 13 yearsJust in case anyone reading this needs a practical solution, I ended up using jscrollpane jQuery plugin.
-
Satinder singh almost 11 yearsi tried as same as you written, but its not working for my in FF, check the jsfiddle.net/gGbkY/1 am i missing something ?
-
ipirlo almost 11 yearsIt works in user-style, and it seems not to work in web pages. I have not found official direction from Mozilla on this.
-
forivall about 10 yearsThere's also trackpad scroll emulator -- it's what twitch.tv uses.
-
Leonard Teo almost 10 yearsPerfect Scrollbar is actually really good. After exhausting many other options, I found it to be the best solution. Thanks for suggesting it.
-
Krunal Shah over 9 yearsplease check out the same link: it doesn't work any more
-
stvnrynlds almost 9 yearsThis doesn't answer the question, unfortunately. Dimitri is trying to style the scrollbar, not hide it.
-
Tomaz almost 9 yearsThat was 4 years ago (I'm aware of that) so I'm sure he already did something by now. But the topic is still relevant today - while other browsers allow some type of "illegal" modification of scrollbars, FF doesn't. That's why I decided to post it.And the front-end result is visually styling scrollbar, regardless of the fact that the way to do it is hiding part of it.
-
Danny R over 8 yearsnanoScroller is also really good, and relatively lean. jamesflorentino.github.io/nanoScrollerJS Opposed to the heavy JS plugins, this one simply hides the native scroller, and shows an alternate scroller using the native 'scroll' event
-
RozzA over 8 yearsi love this solution except for all the extra markup with absolute positioning (makes variable size stuff a nightmare) plus you cannot actually change the style, you are simply masking/hiding elements of the existing scroller - too bad if i want a green bar!
-
RozzA over 8 yearsi've been avoiding all of the jquery solutions, since they all lag out on slower machines or machines under stress, but PS looks like a winner
-
tmthyjames over 8 yearsyea, after four years, it's not about answering the OP's question as much as it is contributing to the community.
-
Filip Dupanović about 8 yearsThe essence of the problem is that the solutions provided by some rendering engines are non-standard. This is the question that best addresses my concerns and this is the answer I was scrolling for.
-
thirtydot almost 8 years@Jeff: You can try github.com/noraesae/perfect-scrollbar or github.com/jnicol/trackpad-scroll-emulator. They may already have been mentioned.
-
Dmitry over 7 yearsThe answer doesn't help to solve the problem. But you can find the solution here: stackoverflow.com/questions/25480565/…
-
Marecky over 6 yearsWhat's the user-style?
-
thephpdev about 6 yearsAlso, for anybody that likes to keep the browser's native scrolling dynamic, use github.com/Diokuz/baron, good library, far better than dicking around with jScrollPane.
-
Jacques Mathieu about 6 years@thephpdev There's a bug in the demo. If I scroll down all the way to the bottom and continue scrolling down, in order to scroll back up I have to scroll up the same amount I scrolled down after hitting the bottom. This happened on Chrome 65 if that means anything. Lmk if that made any sense.
-
thephpdev about 6 years@JacquesMathieu, I see what you mean. Though that is not Baron's fault, if I download the page and prevent baron from initialising, the bug still occurs. So it looks like Chrome it at fault here.
-
thephpdev about 6 yearsAlso, it doesn't look like I had to scroll up the equivalent amount I'd scrolled down. It looks like it starts ignoring input from the mousewheel once the limit has been reached. It appears to set some kind of timeout, which is reset when mousewheel input is received, such that if you don't use the mousewheel for ~ 500ms, the lock is released. It also looks like moving the mouse away from the scrollable container, and back over again releases the lock, although that may just be the timeout.
-
thephpdev about 6 yearsThis isn't even a bug. I believe this behaviour exists to stop the whole page from scrolling when the limit is reached in a scrollable element.
-
thephpdev about 6 yearsIt also seems to behave this way somewhat inconsistently, also on Chrome 65.
-
Jacques Mathieu about 6 years@thephpdev interesting. I wonder if there is a way to disable/change this behavior, as it is something I would prefer not to happen. No need to investigate this though, as this is not a pressing issue for me at all.
-
thephpdev about 6 years@JacquesMathieu, well think about it. If you've got an instance of some WYSIWYG editor on a page, and you're typing out anything of reasonable length, imagine how annoying it'd be if when you scrolled to the top of the editor, it'd start scrolling the whole page up. I don't even notice the behaviour, it just feels right. And clearly you've never had an issue with it if you've only just noticed it now and thought it was a bug.
-
Sterling Bourne about 6 yearsThe bug you linked was reported 17 years ago and still hasn't been assigned. I think it's safe to say that FF will never support the hiding of native scrollbars.
-
Jacques Mathieu about 6 years@thephpdev In that case, that would be the preferred behavior. However, I think I was referring to being able to change the timeout for the lock, as half a second seemed too long for me. Also, just tested this again and it works fine with no delay between scrolling down and up on Chrome 66.
-
thephpdev about 6 years@JacquesMathieu, I understand what you mean, when you do really want to scroll up in the cases where that lock occurs, it does feel disconcerting. Also, just tested the demo (also on 66), and it appears they've disabled the functionality, but only if the scrollable container is not inside another scrollable container. If you add
margin-bottom: 2000px
to the<body>
element so that the page becomes scrollable, the lock behaviour still exists. Though it does seem to be improved, although that may be placebo as I expected a change in behaviour. -
wegry over 5 yearsdrafts.csswg.org/css-scrollbars-1 is the stage 1 start of the spec, but it's enabled in Firefox Nightly now out of the box by default.
-
thirtydot over 5 yearsThanks for this answer. I've updated my accepted answer to promote this (and the other relevant answer) so that people are more likely to see it.
-
vhs over 5 yearsThis essentially duplicates Luca's answer from three weeks prior.
-
vhs over 5 yearsThis is unfortunately a fickle solution as you have hard-coded the size of the size of the scrollbar—and that can change based on accessibility settings among other reasons.
-
Alexander O'Mara over 5 years@JoshHabdas That answer does not contain nearly as much compatibility or usage information. I created this answer because the other answer didn't have the important information I was looking for.
-
vhs over 5 yearsYou could give them credit, suggest feedback or consider editing their answer.
-
Alexander O'Mara over 5 years@JoshHabdas A radical edit like that would seem inappropriate. I also didn't use their answer to compose this answer, I first learned about it through the Firefox release notes, then later found this Q&A which didn't have any of the information I had researched.
-
vhs over 5 yearsI believe upvotes are based on usefulness, so no worries. You may chose not to credit or acknowledge their answer but I don't see much usefulness in duplicates, which this essentially is.
-
Alexander O'Mara over 5 years@JoshHabdas Well, 5 people already found it useful, and it contains information not found anywhere else on the web, so I disagree.
-
vhs over 5 yearsLooks like IE 5.5 may have gotten something right after all. :)
-
AbeIsWatching about 4 yearsGood news, but how can we change the outline?
-
ivanjermakov over 3 years
scrollbar-width
only supports 3 values:none
,thin
andauto
- developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width -
xinthose about 3 yearsif they made
scrollbar-width: thin
why couldn't they makescrollbar-width: thick
? -
danday74 over 2 yearsneed to add the class to html tag not body tag for firefox (if u want thin scrollbar on body)
-
Ahmed Taha over 2 yearsthe right order is (thumb , track) not (track,thumb)
-
LuckyLuke Skywalker over 2 yearsFor the standard scrollbar use these via the html selector. And please comment in case sth changes.
-
LuckyLuke Skywalker over 2 years(offtopic: in chrome it still works like this btw: developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar and bear in mind that stackoverflow.com/a/67902128/14824067 )
-
Jadam about 2 yearsThis Works on Wordpress Guys, Thanks <3
-
Naredla Nithesh Reddy about 2 yearsBut still there are few things which needs improvement from firefox side. Like, When you have the overflow content, scrollbar is coming inside the control. this effects the inner elements width, where as in chrome the control size will be unaltered and the scrollbar will get added at the edge of control.
-
Naredla Nithesh Reddy about 2 yearsAnd the position of scrollbar inside element effects the inner elements width.it will take 15px when scrollbar presents. This makes inner elements width related styles inconsistent when we set the overflow to auto. :(
-
Kraken about 2 years"The auto-hiding semi-transparent scrollbars that are the macOS default cannot be colored with this rule (they still choose their own contrasting color based on the background). Only the permanently showing scrollbars (System Preferences > Show Scroll Bars > Always) are colored." :facepalm: