Scrollbars in mozilla

Question

I have been using chrome for the longest time of my life. When I made my website and wanted to hide a scrollbar that appeared in my sidebar menu, I just used overflow: auto; in CSS, and then .sidebar_menu::-webkit-scrollbar {display: none;}. So there was no visible scrollbar, and I could scroll through the sidebar menu with my mouse wheel.

Yesterday, I started using Mozilla Firefox, and I realized that the scrollbar is vidible, and .sidebar_menu::-moz-scrollbar {display: none;} didn't work. This scared me to be honest, as I cannot see a way to get out of this. I just want it to be the same in chrome and Mozilla. At least this scrollbar thing.

You can try to get this library. It's a custom scroll js library and might help you. http://rocha.la/jQuery-slimScroll — Dinca Adrian, Jan 11 '18 at 13:38
There's nothing like that for Firefox. Or IE, or Edge, or anything non-webkit. Safest bet would be to overflow:hidden the element, then use javascript to adjust the (negative) margin-top on scroll — Facundo Corradini, Jan 11 '18 at 13:42
There is no fix, can oonly hack this one --> https://stackoverflow.com/questions/19580366/hide-scrollbar-in-firefox — Ylama, Jan 11 '18 at 13:44

score 6 · Accepted Answer · answered Dec 11 '18 at 14:54

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)

score 1 · Answer 2 · answered Jan 11 '18 at 13:43

The scrollbar (normally) can't be modified. This is up to the browsers to handle how it will look like.

But, you can do it because of vendor prefixes. Those are prefixes you use that target specific browsers, such as

-o- for Opera
-moz- for Mozilla
-webkit- for Safari, Chrome, Android ...
-ms- for IE and Edge

You were right to try it, unfortunately there's no equivalent for Mozilla. You can take a look at this topic to try to find a solution, but honestly, you should just give up, almost no one is paying attention to that ...

score 1 · Answer 3 · answered Dec 14 '20 at 05:24

Just in case someone stumbles across this, you can easily achieve the same effect in Firefox using:

.sidebar_menu {
    overflow: auto;
    scrollbar-width: none; /* hide the scrollbar in FF */
}

As stated by the other answers, FF currently only supports scrollbar-width: thin|none and scrollbar-color: #fgcolor #bgcolor without any pseudo CSS selectors or vendor prefixes. A cross-browser solution would be:

 /* Hide scrollbar for Chrome, Safari and Opera */
.sidebar_menu::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.sidebar_menu {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

This should be the accepted answer, as it fully addresses OP question — Joe82, Nov 19 '21 at 11:24

score 0 · Answer 4 · answered Jan 11 '18 at 13:41

0

I believe that -webkit-scrollbar is not supported in Firefox. Although you can look for javascript libraries, which will do what you need.

answered Jan 11 '18 at 13:41

Enrico Lund

87
9

Scrollbars in mozilla

4 Answers4