卡卡網(wǎng)

本文介紹3種默認(rèn)情況下隱藏滾動條的方法，只有在元素懸停時才顯示它們。

示例1

默認(rèn)情況下隱藏滾動條，只有在元素懸停時才顯示。

經(jīng)測試，它可以在 Chrome、Firefox 和 Safari 上運行，非常堅固。

demodownload

訣竅是mask覆蓋滾動條！所以，如果你創(chuàng)建一個mask與滾動條一樣寬（在本示例里，只是猜測 17px 會覆蓋它）和超高（兩者都應(yīng)該由腳本計算），它可以完美地覆蓋滾動條。

值得注意的是，這是元素的真實滾動條，而不是偽造的。 

另外，它是純CSS實現(xiàn)，無需用到JavaScript編程。

示例2

如果有樣式的滾動條是必需的，并且你需要跨瀏覽器完美地進(jìn)行非常詳細(xì)的設(shè)計控制，那么你可能需要尋求 JavaScript 解決方案。

本示例使用了一個JS插件：simplebar.js，同時有一個CSS庫文件：simplebar.css，它看起來很現(xiàn)代，易于實例化。

需要說明的是，本示例也是跨瀏覽器的，各種瀏覽器表現(xiàn)相同。

效果圖：

demodownload

示例3

本示例使用了另一個JS插件：simple-scrollbar.js，CSS代碼比上面示例2的簡單多了。

本示例與上面示例2比較相近，它的滾動條顏色淺一些，鼠標(biāo)懸停時鼠標(biāo)形狀有改變。

跟示例2一樣，本示例也是跨瀏覽器的，各種瀏覽器表現(xiàn)相同。

效果圖：

demodownload

總結(jié)

本文介紹了3個默認(rèn)隱藏滾動條的方法，鼠標(biāo)懸停時顯示它們。它們還有一個優(yōu)點，就是它們是跨瀏覽器的，在各種瀏覽器里表現(xiàn)一樣。

相關(guān)文章

• [15個實例]CSS自定義滾動條的樣式：圓角/平角/寬度/顏色等
• 如何用CSS自定義滾動條寬度及軌道背景顏色
• 4個純CSS自定義的炫酷醒目的滾動條
• 6個純CSS自定義的簡單而優(yōu)雅的滾動條樣式

標(biāo)簽: css  滾動條  scrollbar