Custom CSS Scrollbar For Firefox

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