Custom CSS Scrollbar for Firefox
As of late 2018, there is now limited customization available in Firefox!
See these answers:
- https://stackoverflow.com/a/54101063/405015
- https://stackoverflow.com/a/53739309/405015
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
Problem with the css of the scrollbar in firefox
As of late 2018, there is now limited customization available in Firefox!
See these answers:
- https://stackoverflow.com/a/54101063/405015
- https://stackoverflow.com/a/53739309/405015
And this for background info: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
How can I create custom scrollbar for Mozilla Firefox with CSS?
On this side the firefox scollbar is cancelled.
http://codemug.com/html/custom-scrollbars-using-css/
But look here:
http://jscrollpane.kelvinluck.com
http://hesido.com/web.php?page=customscrollbar
http://script-tutorials.com/custom-scrollbars-cross-browser-solution
http://manos.malihu.gr/jquery-custom-content-scroller
These are plugins that work for all browsers.
Plugin only for firefox:
https://addons.mozilla.org/de/firefox/addon/noiascrollbars/
I hope I could help you!
Scrollbars in mozilla
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:
The key rules are:
For Firefox
.scroller {
overflow-y: scroll;
scrollbar-color: red green;
scrollbar-width: thin;
}
For Chrome
.scroller::-webkit-scrollbar-track
{
background-color: green;
}
.scroller::-webkit-scrollbar
{
width: 8px;
background-color: #F5F5F5;
}
.scroller::-webkit-scrollbar-thumb
{
background-color: red;
}
In the example linked are used also additional styles for Chrome to improve final style (such as rounded corners and shadows)
Related Topics
Swap Div Position With CSS Only
How to Fix Invalid Request (Unsupported Ssl Request)
How to Style Html5 Range Input to Have Different Color Before and After Slider
Why Can't an Element With a Z-Index Value Cover Its Child
How to Center Floated Elements
Transparent Arrow/Triangle Indented Over an Image
How to Show Only Corner Borders
Any Recommendations For a CSS Minifier
Possible to Use Border-Radius Together With a Border-Image Which Has a Gradient
Error: Css: Background:/Is an Incorrect Operator
How to Disable the Border on Bootstrap 4 Cards
How to Wrap or Truncate Long Strings in a Material-Ui Expansionpanelsummary
Css Floating Divs At Variable Heights
Transitions on the CSS Display Property
How to Combine a Background-Image and Css3 Gradient on the Same Element
Line Before and After Title Over Image