firefox scroll bar hidden

Question

How can I hide Firefox scroll bars when overflow:auto?

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

I use this code but this on

Answer 1

I didn't find anything specific to Firefox. I have also been looking for an equivalent to ::-webkit-scrollbar { display:none }.

What I did find, however, is a generic cross-browser 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, but otherwise works like a charm.

Answer 2

In firefox 64, if you want to hide scroll when you have overflow:auto you can now do scrollbar-width: none;! Woop woop! Here are the relevant docs (browser support is show at bottom of page).

Below is a css only solution that will hide your vertical and horizontal scrollbar in firefox (tested in v64 & firefox dev edition v65.0b8). Hint: try vertical and horizontal scrolling on the blue div.

div {
  overflow: auto;
  height: 200px;
  width: 80%;
  background: linear-gradient(to bottom, cyan, blue);
  white-space: no-wrap;

  /* the line that rules them all */
  scrollbar-width: none;
  /* */
}

span {
  width: 200%;
  height: 50%;
  background: linear-gradient(to left, green, yellow);
  display: inline-block;
  margin: 5rem;
}

<div><span></span></div>