“滾動條寬度：無；” 在 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;嘗試了這個scrollbar-width: none; （適用於 Firefox）不起作用。 在 FF 71 中，當超出視口時，我看到滾動條出現。

事情發生了變化（自 FF66+ 以來？），這張海報也提出了這個問題。 他的解決方案是讓FF滾動條透明。 但它仍然占用空間，而我需要完全隱藏它。

最新版本的FF有什么解決方案可以替換scrollbar-width: none; ?

Answer 1

將此代碼段添加到html和body適用於 Chrome 和 Firefox！

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

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

鉻版：87.0.4280.88

火狐版本：84.0.1

Answer 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”，“反應dom”：“^17.0.2”，

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