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 problem is that this doesn't work on Firefox. I tried many ways to do it but it still doesn't work.

doesn't seem like a good idea to do it that way. use css overflow hidden on html, body and use a wrapper div with 100% height and width. — Abhitalks, Jan 08 '14 at 13:39
This might be a little too obvious, but have you tried -moz- for Firefox? I agree with abhitalks though, this doesn't seem like a great way to do it. — Myles, Jan 08 '14 at 13:45
http://stackoverflow.com/questions/15394065/firefox-scroll-bar-hidden — Jacob, Jan 08 '14 at 13:49
one working solution http://stackoverflow.com/questions/5820304/hidden-scrollbars-in-firefox-allows-scrolling-but-just-no-scrollbar — IvanM, Jan 17 '17 at 00:41
Firefox has a recommended [extension](https://addons.mozilla.org/en-US/firefox/addon/custom-scrollbars/) for customizing scrollbar where you can set scrollbar width to hidden. — Shub, Mar 20 '23 at 17:50

score 169 · Answer 1 · edited Nov 23 '19 at 03:18

169

You can use the scrollbar-width rule. You can scrollbar-width: none; to hide the scrollbar in Firefox and still be able to scroll freely.

body {
   scrollbar-width: none;
}

edited Nov 23 '19 at 03:18

Jeremy

2,870
3
23
31

answered Dec 14 '18 at 21:34

George Flint

1,716
1
7
8

11

This works on latest browser, but please note that this is still an [experimental feature](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width). Also, keep in mind that this property should be used with the element that is producing the scrollbar. For example, if you are using Angular Material's `md-content` then, the body does not produce the scrollbar, rather the `md-content` element does. Hence, `body { scrollbar-width: none; }` will not work, but `md-content { scrollbar-width:none; }` will. – Sajib Acharya Apr 15 '19 at 12:37
1

Ah! Finally something like this! – 71GA Mar 09 '21 at 20:02

Rowin · Answer 2 · 2019-02-05T06:38:02.460

36

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 */
}

edited Feb 05 '19 at 06:38

answered Feb 05 '19 at 05:46

Rowin

479
4
5

score 20 · Answer 3 · edited Jul 28 '16 at 01:15

20

I was able to hide the scrollbar but still be able to scroll with mouse wheel with this solution:

html {overflow: -moz-scrollbars-none;}

Download the plugin https://github.com/brandonaaron/jquery-mousewheel and include this function:

jQuery('html,body').bind('mousewheel', function(event) {
    event.preventDefault();
    var scrollTop = this.scrollTop;
    this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
    //console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
  });

edited Jul 28 '16 at 01:15

John

1
13
98
177

answered Sep 18 '14 at 05:07

CrazyScientist

409
4
6

13

This seems to be equivalent to "overflow: hidden;" and doesn't allow scroll :-( – bob Mar 13 '16 at 21:22
Works for me - horizontal scrollbar now hidden in Firefox. Thanks! – Liran H Nov 13 '17 at 14:33
4

As of Firefox 63, this only works if you set `layout.css.overflow.moz-scrollbars.enabled` to `true` in Firefox's feature settings, making it unsuitable for production use. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Deprecated – Josh Sep 19 '18 at 14:01
That didn't do the trick for me however putting scrollbar-width: none; inside html did. – slodeveloper Mar 21 '19 at 10:51

score 11 · Answer 4 · answered Jul 27 '19 at 13:52

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 */
          }

score 9 · Answer 5 · answered Feb 12 '20 at 09:58

9

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.

answered Feb 12 '20 at 09:58

Ky_Pham

99
1
2

score 8 · Answer 6 · answered Feb 28 '18 at 05:21

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

score 7 · Answer 7 · answered Aug 24 '20 at 17:59

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 */
}

Try my post it should work without setting scrollbar-color to transparent. — Khalid Almannai, Apr 20 '23 at 12:00

score 6 · Answer 8 · answered Aug 06 '19 at 20:09

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;

How do you do it in FF70+? `scrollbar-width: none;` doesn't work anymore. I need to hide the scrollbar, not make it transparent. — gene b., Jan 08 '20 at 01:59

score 4 · Answer 9 · answered Jan 08 '14 at 13:48

4

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.

answered Jan 08 '14 at 13:48

Myles

926
2
12
29

3

Works, but not reliable as 16px is just an assumed width of scrollbar. – igorpavlov Nov 06 '15 at 13:45
50

give credits to the real author @chowey when you copy. http://stackoverflow.com/questions/15394065/firefox-scroll-bar-hidden?lq=1 – M1X Nov 08 '15 at 02:50
It deosn't work on FF 56 when inner div content is longer than screen width – Mr Jedi Nov 04 '17 at 19:37
3

This fix is solving the problem for FF but have worse side effects in other browsers (cutting the text) – Kosmonaft May 23 '18 at 05:41
I can easily see myself using that in all the divs that requires scrolling over my app ... – Felipe Oct 08 '18 at 13:17

score 4 · Answer 10 · answered Sep 11 '20 at 02:43

4

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

answered Sep 11 '20 at 02:43

Dante Souza e Souza

161
2
5

score 3 · Answer 11 · answered Jul 21 '21 at 17:36

If you want the scrollbar gone on the whole body and still have functionality, add this under your style tags at the top of your html code. This solved the problem for me.

Reference: https://careerkarma.com/blog/hide-scrollbar/

      * {

           scrollbar-width: none; /* Firefox implementation */

       }

score 3 · Answer 12 · answered Jun 15 '22 at 07:27

Update: 2022

This block of code will hide both the horizontal and vertical scrollbars on Mozilla Firefox. Tested on Version 101.0.1

index.css

body {
  -ms-overflow-style: none; /** For IE */
  overflow-y: scroll;
  overflow-x: hidden;
}
::-webkit-scrollbar {display:none;}
@-moz-document url-prefix() {
  html,
  body {
    scrollbar-width: none;
  }
}

score 1 · Answer 13 · edited Dec 28 '17 at 16:04

1

Try using this:

overflow-y: -moz-hidden-unscrollable;

edited Dec 28 '17 at 16:04

Yassine Badache

1,810
1
19
38

answered Dec 28 '17 at 15:41

peeter

63
6

2

It hides `scrollbar` but stop scroll action. what's the difference between `overflow-y: -moz-hidden-unscrollable;` and `overflow: hidden`. Actually nothing so it is not the right answer. but I give you a vote up. thanks. – AmerllicA Feb 25 '18 at 11:53
2

the difference is that the first one hides it only in firefox – peeter May 21 '18 at 17:32
I voted you up but it is so weird for me why you are `-2`? your answer is correct – AmerllicA May 22 '18 at 07:08
The question is how to hide the scrollbars but still being able to let the user scrolls if needed when content overflows, not to completely disable the scroll. the reason for that is that FF scrollbars are ugly and sometimes appear even if content is not overflowing. All other browsers offer simple and elegant css solution for that - may I need to say, even IE! – Felipe Oct 08 '18 at 13:21

score 1 · Answer 14 · answered Mar 19 '20 at 16:38

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

score 1 · Answer 15 · answered Feb 19 '22 at 05:04

1

if you want to hide extension popup option on Firefox, try following

  html {
    scrollbar-width: none;
  }

answered Feb 19 '22 at 05:04

Morty

746
5
12

score 1 · Answer 16 · answered Jul 28 '22 at 15:20

To hide the scrollbars, but still be able to keep scrolling,

  /* Hide scrollbar for Chrome, Safari and Opera */

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

/* Hide scrollbar for IE, Edge and Firefox */

* {
-ms-overflow-style: none;
scrollbar-width: none;
}

score 0 · Answer 17 · answered Nov 08 '18 at 12:58

0

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

answered Nov 08 '18 at 12:58

gazdagergo

6,187
1
31
45

score 0 · Answer 18 · edited Mar 26 '20 at 07:54

0

::-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).

edited Mar 26 '20 at 07:54

סטנלי גרונן

2,917
23
46
68

answered Mar 26 '20 at 07:30

Manmeet Kaur

39
8

score 0 · Answer 19 · answered Apr 20 '23 at 11:57

This should hide scrollbars for an element on most browsers.

.scrollhost::-webkit-scrollbar { 
    width: 0;
    height: 0;
 }

@-moz-document url-prefix() {
    .scrollhost {
        overflow: auto;
        -ms-overflow-style: none;
        scrollbar-color: transparent transparent; 
    }
}

How to hide scrollbar in Firefox?

19 Answers19

Linked

Related