CSS-界面滾動時不顯示滾動條

最近産品提出一個需求，在界面滾動時，元素右側不顯示滾動條。查了網上的答案，最後總結了一下幾個情況。

1、設定正常的滾動條：使用 overflow:auto。父元素需要設定一個高度，設定相對定位，這樣子元素的高度大于父元素高度才能顯示滾動條。如果父元素的高度完全由子元素撐開，界面上不會出現滾動條。設定overflow：auto 失效的主要問題：可能是這個div沒有設定 100% 然後父元素清除浮動 (float：none; position: relative;)

.father {
    position: relative;
    height: 100px;
    border: 1px splid red;
}
.son {
    overflow: auto;
    height: 1000px;
}
           

2、設定滑鼠經過顯示的滾動條：預設值盒子是 hidden。當滑鼠經過這樣盒子時，設定盒子的overflow 變成 auto。這樣滑鼠不經過時不會顯示滾動條。缺點：如果盒子内部有文字，盒子的寬度變化可能造成文字的重新排版，視覺上有點不好看。

div {
  overflow: hidden;
}
div:hover {
  overflow: auto;
}
           

如果内容寬度是百分比或者flex布局，滑鼠移動會造成寬度變化，是以可以使用下面的改進版，不同情況父元素設定不同的寬度（2019年7月補充）。

div {
  overflow: hidden;
  width: calc(100% - 8px);
  8px 是滾動條的寬度（在谷歌上顯示良好）
}
div:hover {
  overflow: auto;
  width: 100%;
}
           

3、設定界面可以滾動但是不顯示滾動條：

方法一：設定滾動條的樣式（在 webkit 核心的浏覽器比較适合）這樣可以同時設定滾動條的寬度和顔色。這種辦法很好。

div::-webkit-scrollbar {
  width: 0;
}
           

方法二：右側元素設定寬度或者定位，将左側元素的滾動條遮擋。這樣的方法不入流，在移動端相容不好實作。

div {
  float: right;
  width: 32%
}
div {
  float: left;
  width: 70%;
}
           

4、系統相容性和浏覽器相容性（2019-12-02、2020-05-01補充）

系統相容性：Windows 下，浏覽器需要加上 body { overflow-y: auto } 可以不顯示滾動條，Mac 系統下沒有這個問題。

浏覽器相容性：webkit 核心浏覽器使用 -webkit-scrollbar 效果明顯，其他核心效果不明顯。

在火狐浏覽器下，-webkit-scrollbar 無效，可以使用 scrollbar-width: none; 這樣不會顯示滾動條

下面的圖檔是火狐浏覽器，顯示滾動條的情況

加入 scrollbar-width: none; 後，滾動條不顯示，界面可以滾動

其他的浏覽器可以嘗試用上面幾種方法解決