卡卡網(wǎng)

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

示例1

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

經(jīng)測(cè)試，它可以在 Chrome、Firefox 和 Safari 上運(yùn)行，非常堅(jiān)固。

demodownload

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

值得注意的是，這是元素的真實(shí)滾動(dòng)條，而不是偽造的。 

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

示例2

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

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

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

效果圖：

demodownload

示例3

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

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

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

效果圖：

demodownload

總結(jié)

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

相關(guān)文章

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

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