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

Just in case, if someone is looking for a hack to somehow make the scrollbar invisible in firefox(79.0).

Here's a solution that successfully works for Chrome, IE, Safari, and makes the scrollbar transparent in Firefox. None of the above worked for firefox(79.0) in truly hiding the scrollbar.

Please if anyone finds a way to do it without changing the color, it will be very helpful. Pls comment below.

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

.scrollhost ::-moz-scrollbar {
  display: none;
 
}
 
.scrollhost {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-color: transparent transparent; /*just hides the scrollbar for firefox */
}

Answer 2

I got it working for me in ReactJS using create-react-app by putting this in my App.css:

@-moz-document url-prefix() {
  html,
  body {
    scrollbar-width: none;
  }
}

Also, the body element has overflow: auto

Answer 3

I used this and it worked. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

html {
scrollbar-width: none;
}

Note: User Agents must apply any scrollbar-width value set on the root element to the viewport.

Answer 4

Try using this:

overflow-y: -moz-hidden-unscrollable;

Answer 5

This is what I needed to disable scrollbars while preserving scroll in Firefox, Chrome and Edge in :

          @-moz-document url-prefix() { /* Disable scrollbar Firefox */
            html{
              scrollbar-width: none;
            }
          }
          body {
            margin: 0; /* remove default margin */
            scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
            -ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
            overflow-y: scroll;
          }
          body::-webkit-scrollbar {
            width: 0px;
            background: transparent; /* Disable scrollbar Chrome/Safari/Webkit */
          }

Answer 6

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

It will not work in Firefox, as the Firefox abandoned the support for hidden scrollbars with functionality (you can use overflow: -moz-scrollbars-none; in old versions).