"scrollbar-width: none;" not working in Firefox 71 to hide scrollbars while allowing scrolling

Question

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

Answer 1

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

Answer 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",

Answer 3

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