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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This is something of a generic solution    lt div class  outer  gt    lt div class  inner  gt      Some content      lt  div gt   lt  div gt    lt style gt    outer    overflow  hidden      inner    margin-right  -16px   overflow-y  scroll   overflow-x  hidden     lt  style gt    The scroll bar is hidden by the parent div   This requires you to use overflow hidden in the parent div

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

-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

User · Answer

Try using this   overflow-y  -moz-hidden-unscrollable

User · Answer

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

User · Answer

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

User · Answer

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

[css] How to hide scrollbar in Firefox?

Examples related to css

Examples related to firefox