[英]"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;
但是我在 Firefox 71 和样式
scrollbar-width: none;
尝试了这个scrollbar-width: none;
(which is meant for Firefox) doesn't work. (适用于 Firefox)不起作用。 In FF 71 I see the scrollbars show up when the viewport is exceeded.
在 FF 71 中,当超出视口时,我看到滚动条出现。
Something has changed (since FF66+?) and this poster has also raised this issue.事情发生了变化(自 FF66+ 以来?),这张海报也提出了这个问题。 His solution is to make the FF scrollbar transparent.
他的解决方案是让FF滚动条透明。 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;
最新版本的FF有什么解决方案可以替换
scrollbar-width: none;
? ?
Adding this snippet to both html
and body
works on Chrome and Firefox!将此代码段添加到
html
和body
适用于 Chrome 和 Firefox!
html, body {
overflow-y: scroll;
scrollbar-width: none;
}
body::-webkit-scrollbar {
width: 0;
height: 0;
}
Chrome version: 87.0.4280.88铬版:87.0.4280.88
Firefox version: 84.0.1火狐版本: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", “反应”:“^17.0.2”,“反应dom”:“^17.0.2”,
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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.