Custom scroll bar cross browser [duplicate]

Question

I found the following code that allows me to "hide" the scrollbar by setting a width/heigth of 0px. It works great on Chrome but not on Firefox. I would like it to work in other browsers as well.

Is there a way to make it work or an equivalent to make the scrollbar with 0 width (and invisible) so it would not take any space of my container?

Please note that I found a way to hide the scrollbar. I don't aim to disable it as recommended in other questions by using overflow: hidden. I want to make it work in other browsers as well. That is what I would like you to help me with...

Thanks in advance for helping this newbie!

.scrolling-div {
  overflow: auto;
}

::-webkit-scrollbar
{
  width: 0px;  /* for vertical scrollbars */
  height: 0px; /* for horizontal scrollbars */
}

::-moz-scrollbar {
  width: 0px;
  height: 0px;
}

Answer 1

Here's the solution to the question:

// *** HIDING THE SCROLLBAR ***
// For Chrome, Safari, and Opera
.scrolling-div::-webkit-scrollbar {
  display: none;
}

// For Firefox
.scrolling-div {
  scrollbar-width: none;
};

// For Internet Explorer and Edge
.scrolling-div::-ms-scrollbar {
  overflow-style: none;
}