“滚动条宽度：无；”在允许滚动时无法在 Firefox 71 中隐藏滚动条答案

【问题标题】："scrollbar-width: none;" not working in Firefox 71 to hide scrollbars while allowing scrolling“滚动条宽度：无；”在允许滚动时无法在 Firefox 71 中隐藏滚动条
【发布时间】：2020-04-25 13:19:18
【问题描述】：

根据all the answers关于如何在允许滚动的同时隐藏滚动条，标准方法是

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

但我在 Firefox 71 中尝试过，但样式 scrollbar-width: none;（适用于 Firefox）不起作用。在 FF 71 中，当超出视口时，我看到滚动条出现。

发生了一些变化（从 FF66+ 开始？），this poster 也提出了这个问题。他的解决方案是让FF滚动条透明。但它仍然占用空间，而我需要完全隐藏它。

最新版FF替换scrollbar-width: none;有解决方案吗？

【问题讨论】：

在这里工作得很好。 macOS Catalina 上的 71 和 72 以及所有操作系统的滚动条首选项。

标签： html css firefox

【解决方案1】：

将这个 sn-p 添加到 html 和 body 可以在 Chrome 和 Firefox 上运行！

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

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

Chrome 版本：87.0.4280.88

火狐版本：84.0.1

【讨论】：

似乎在较新的 Firefox 版本中，您确实需要将样式添加到 html。将其添加到 body 不起作用（不再）。

【解决方案2】：

我的解决方案

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

反应

“反应”：“^17.0.2”， "react-dom": "^17.0.2",

【讨论】：

【解决方案3】：

通过设置滚动条的宽度和背景值来隐藏滚动条，试试下面的代码：

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

【讨论】：

不起作用——我在 FF 71 中看到了垂直滚动条。我创建了一个简单的页面来测试它。您的 sn-p 有效，因为 StackOverflow 会自动将自己的滚动条添加到该 DIV。
尝试使用css的“overflow-y:hidden”这个属性隐藏垂直滚动条