CODEWITHSUNDEEP
htmlcssfirefoxscrollbar
Jakub Chaloupka
Jakub Chaloupka

Reputation: 177

Scrollbars in mozilla

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.

Upvotes: 5

Views: 14405

Answers (4)

Shaun Mitchell
Shaun Mitchell

Reputation: 2686

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 */
}

Upvotes: 1

Luca Detomi
Luca Detomi

Reputation: 5716

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)

Upvotes: 6

user4676340
user4676340

Reputation:

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 ...

Upvotes: 1

Enrico Lund
Enrico Lund

Reputation: 87

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

Upvotes: 0

Related Questions