How to hide scrollbar in Firefox?

Question

I just found out how to hide the scrollbar in Google Chrome, I did it with this code:

::-webkit-scrollbar { display: none; }

The only p

Answer 1

For webkit use following:

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

For Mozilla Firefox use following code:

@-moz-document url-prefix() {
    html,body{overflow: hidden !important;}
}

and if scrolling does not work then add

element {overflow-y: scroll;}

to specific element

Answer 2

This is something of a generic solution:

<div class="outer">
 <div class="inner">
    Some content...
 </div>
</div>

<style>
 .outer {
 overflow: hidden;
}
 .inner {
 margin-right: -16px;
 overflow-y: scroll;
 overflow-x: hidden;
}
</style>

The scroll bar is hidden by the parent div.

This requires you to use overflow:hidden in the parent div.

Answer 3

For more recent version of Firefox the old solutions don't work anymore, but I did succesfully used in v66.0.3 the scrollbar-color property which you can set to transparent transparent and which will make the scrollbar in Firefox on the desktop at least invisible (still takes place in the viewport and on mobile doesn't work, but there the scrollbar is a fine line that is placed over the content on the right).

overflow-y: auto; //or hidden if you don't want horizontal scrolling
overflow-y: auto;
scrollbar-color: transparent transparent;

Answer 4

I tried everything and what worked best for my solution was to always have the vertical scrollbar show, and then add some negative margin to hide it.

This worked for IE11, FF60.9 and Chrome 80

body {
  -ms-overflow-style: none; /** IE11 */
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -20px;
}

Answer 5

In some particular cases (the element is on the very right of the screen, or its parent overflow is hidden) this can be a solution:

@-moz-document url-prefix() {
  .element {
    margin-right: -15px;
  }
}

Answer 6

To hide scroll bar on Chrome, Firefox and IE you can use this:

.hide-scrollbar
{
    overflow: auto;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
}