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;
?
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
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",
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With