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.

Solution 1

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)

Solution 2

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