10

According to all the answers on how to hide scrollbars while allowing scrolling, the standard approach is

.hidescrollbar {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.hidescrollbar::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

But I tried this in Firefox 71 and the style scrollbar-width: none; (which is meant for Firefox) doesn't work. In FF 71 I see the scrollbars show up when the viewport is exceeded.

Something has changed (since FF66+?) and this poster has also raised this issue. His solution is to make the FF scrollbar transparent. But it still takes up space, whereas I need to hide it completely.

Are there any solutions for the latest versions of FF to replace scrollbar-width: none;?

gene b.
  • 10,512
  • 21
  • 115
  • 227

3 Answers3

3

Adding this snippet to both html and body works on Chrome and Firefox!

html, body {
  overflow-y: scroll;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

Chrome version: 87.0.4280.88

Firefox version: 84.0.1

Exil
  • 311
  • 2
  • 11
  • 26
  • 6
    seems like in newer Firefox versions you really need to add the style to `html`. adding it to the `body` doesn't work (anymore). – low_rents Jun 10 '21 at 14:42
2

my solution

/* Works on Chrome Version 91.0.4472.106 (Official Build) snap (64-bit), Edge, and Safari */

*::-webkit-scrollbar {
    width: 0px;
}

    /* firefox is the end 
working  in version Version 87.0 (64-bit) */ 

body {
   
    overflow-y: scroll;
    scrollbar-width: none;
}

react

"react": "^17.0.2", "react-dom": "^17.0.2",

Nelson Javier Avila
  • 368
  • 3
  • 8
0

Try the below code by hiding the scrollbar by setting its width and background values:

/* make scrollbar transparent */
::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.container {
  /* IE 10+ */
  -ms-overflow-style: none;

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

.container::-webkit-scrollbar {
  /* Safari and Chrome */
  display: none;
}
Dhara Parmar
  • 296
  • 1
  • 8
  • Doesn't work -- I see the vertical scrollbars in FF 71. I created a simple page to test this. Your snippet works because StackOverflow automatically adds its own scrollbar to that DIV. – gene b. Jan 09 '20 at 00:14
  • Try hidden vertical scrollbar using "overflow-y: hidden" this property of css – Dhara Parmar Jan 09 '20 at 04:28