Custom scroll bar cross browser

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;
}

Thanks for providing the link to that question @Moob. However, although the questions seem similar, they are not duplicates and here is why: I don't want to disable the scrolling feature. By using overflow: hidden; as recommended in that question, I won't be able to scroll through my content. That question also shows an equivalent of hiding the scrollbar which I managed to do. The main point of my question is making it work in other browsers as well... — GBeck, Sep 27 '19 at 09:49
It did not work either. I added to the question now that the div that should scroll has overflow: auto in my code. — GBeck, Sep 27 '19 at 10:08
`overflow: auto;` will add the scroll bar if it becomes larger than the viewport. Also could you please tag me when commenting by using `@`, I don't get a notification otherwise. — Halden Collier, Sep 27 '19 at 10:12
Ooopsie @HaldenCollier. Thanks for the explanation. However, I've found the solution to my question just now. It is posted below. — GBeck, Sep 27 '19 at 10:23

score 1 · Accepted Answer · answered Sep 27 '19 at 10:22

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;
}

Custom scroll bar cross browser

1 Answers1