盤旋在懸停的滾動條

網頁滾動條的設計既要考慮用戶體驗，也要兼顧無障礙訪問。一般來說，如果一個區域需要滾動，就應該顯示滾動條。然而，網絡世界千變萬化，一些巧妙的技巧可以提升用戶體驗。本文將介紹一種方法，讓滾動條默認隱藏，只有在鼠標懸停時才顯示。

這種方法由Thomas Gladdines提出，並在我的測試中，它在Chrome、Firefox和Safari瀏覽器上都能正常工作，不受macOS系統設置的影響，兼容性良好。

其核心原理是使用一個遮罩層覆蓋滾動條。通過創建一個與滾動條寬度完全相同的遮罩層（這裡假設寬度為17px，實際寬度可能需要通過腳本計算），並設置足夠的高度，可以完美地隱藏滾動條。甚至可以對遮罩層的定位進行過渡動畫，模擬漸隱漸現的效果，非常巧妙。

值得注意的是，這指的是元素的原生滾動條，而不是偽造的滾動條。偽造滾動條也是一種可行方案，Ben Nadel曾介紹過Slack是如何實現的。 Slack的方法是將滾動條強制渲染到一個被overflow屬性隱藏的區域，然後創建一個虛擬滾動條來模擬原生滾動條，從而獲得對滾動條的更多控制。這與強制渲染滾動條是不同的方法。此外，此方法並不妨礙你對滾動條進行樣式設置，這可能帶來一些好處，例如精確指定滾動條的寬度。

1. 截至本文撰寫時，macOS的說明為：“如果您的設備支持手勢操作，滾動條會在您開始滾動之前隱藏。否則，它們將可見。”

以上是盤旋在懸停的滾動條的詳細內容。更多資訊請關注PHP中文網其他相關文章！