How to Create Custom Scrollbar for Mozilla Firefox with CSS

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

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!

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

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)

Custom scrollbar support on firefox but is it possible to make without jQuery? or is it possible from react js library?

-webkit prefixed CSS rules are for browsers based on WebKit only (Chrome, Safari, Edge etc.).

Firefox uses a different HTML rendering engine (Gecko) which doesn't support -webkit rules such as custom scrolling styles: https://css-tricks.com/almanac/properties/s/scrollbar/

It's possible to use JavaScript solutions though in Firefox to emulate the scrollbar which can then be styled, see the answers here: Custom CSS Scrollbar for Firefox

---

Related Topics