Hide scrollbar in firefox

Mei picture Mei · Oct 25, 2013 · Viewed 31.2k times · Source

I want to hide a scroll bar in page but I can scroll like it has a scroll bar. so I cant use overflow:hidden because I want that I can scroll like normal but cannot see a scroll bar.

so I use this css code (class not-scroll-body is a class of body tag)

.not-scroll-body::-webkit-scrollbar {
    display: none; 
}

It works in Chrome , but when I use -moz- instead of -webkit- like this

.not-scroll-body::-moz-scrollbar {
    display: none; 
}

It doesn't work in Firefox.

What can I do to to make it work?

Thank you for every answer and sorry for my poor english language :)

Answer

protoEvangelion picture protoEvangelion · Jan 8, 2019

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 simple 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.

.not-scroll-body {
  overflow: auto;
  height: 200px;
  width: 90%;
  background: linear-gradient(to bottom, cyan, blue);
  white-space: no-wrap;

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

span {
  width: 200%;
  height: 400%;
  background: linear-gradient(to left, green, yellow);
  display: inline-block;
  margin: 5rem;
}
<div class="not-scroll-body"><span></span></div>