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

Question

根据有关如何在允许滚动时隐藏滚动条的所有答案，标准方法是

.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+ 以来？），这张海报也提出了这个问题。他的解决方案是让FF滚动条透明。但它仍然占用空间，而我需要完全隐藏它。

有什么解决方案可以替换最新版本的 FFscrollbar-width: none;吗？

Answer 1

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

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