CODEWITHSUNDEEP
htmlcssfirefox
gene b.
gene b.

Reputation: 11974

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

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

Upvotes: 12

Views: 10247

Answers (3)

Nelson Javier Avila
Nelson Javier Avila

Reputation: 572

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

Upvotes: 2

Exil
Exil

Reputation: 329

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

Upvotes: 3

Dhara Parmar
Dhara Parmar

Reputation: 293

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

Upvotes: 0

Related Questions