如何自動隱藏Windows瀏覽器上的滾動條

Question

我有幾個元素overflow: auto。它工作很好。在macOS上，滾動條在用戶不滾動時自動隱藏並顯示在滾動條上。

在窗口和任何瀏覽器上，滾動條總是可見的。它做了一個醜陋的渲染。

那麼當用戶不滾動時，如何在每個操作系統和每個瀏覽器上自動隱藏滾動條？

我知道有很多類似的問題，但我還沒有找到一個合適的答案

Answer 1

perfect-scrollbar是

簡約主義的完美定製的滾動條插件

它與幾乎所有的網絡瀏覽器，包括Internet Explorer。

Answer 2

我發現了一些東西！我從來沒有想過這可能是如此簡單：

.my-elem { 
    overflow: hidden 
} 

.my-elem:hover { 
    overflow: auto 
} 

Answer 3

<style type="text/css"> 
body { 
    overflow:hidden; 
} 
</style> 

上面的代碼隱藏水平和垂直滾動條。

由於每個瀏覽器都有自己默認的「用戶代理」的樣式表，你可能需要做一個CSS重置是重置所有的HTML元素一致的基準的造型。那麼你的HTML在所有瀏覽器上都會顯示相同。您也可以標準化。 Normalize.css保留有用的默認值，而不是「不重疊」的所有內容。