用自定義的滾動欄撐起你的東西

我第一次與真正令人著迷的捲軸相遇是在這個網站上。 CSS-tricks V17的發射以其令人難以置信的大膽和視覺震撼的捲軸的發射留下了持久的印象。

我很驚訝。這樣的設計元素能否在專業網站上如此有影響力？微妙的梯度，寬敞的曲線，無縫混合的背景以及純粹的厚度 - 這是一個大膽而創新的設計選擇。捲軸的觸覺吸引力是不可否認的。它邀請互動只是為了欣賞其視覺重量。它是大膽的，前衛的，並且令人愉悅的可訪問，甚至在較舊的瀏覽器上優雅地退化。

雖然當前的CSS技巧滾動欄更加精緻和低調（黑色上的淺灰色），但它仍然保持其品牌標識，並巧妙地展示了梯度效果。但是，它的分心較小，確保它不會干擾閱讀體驗。在我們效率驅動的世界中，優先考慮MVP和80/20規則，自定義滾動條代表了真正的工藝。他們傳達了對單詞無法傳達的細節的關注程度。

標準化工作（正在進行更多）簡化了API：七個偽元素和11個偽級幾乎針對滾動條的各個方面和狀態。雖然這聽起來很廣泛，但僅掌握三個就足以令人印象深刻的自定義：

 <code>body::-webkit-scrollbar { /* required - the "base" of the bar - mostly for setting width */ } body::-webkit-scrollbar-track { /* the "track" of the bar - ideal for customizing "background" colors */ } body::-webkit-scrollbar-thumb { /* the draggable element—the star of the show! */ }</code>

這些工作像其他選定的元素一樣，允許應用不同的CSS技術。媒體查詢，背景梯度，透明度和邊緣（使用各種CSS單元）都有效地發揮作用。 （但是，並非一切皆有可能；我很想在滾動欄上造型光標，以獲得真正的複古感覺）。通過Lea Verou的CSS背景梯度進行實驗，導致了一個非常規的，儘管個性化的滾動式設計，但它是拇指的條紋理髮桿和曲目透明的心臟。無可否認，這是獨一無二的，在我實施更微妙的版本後，在我的工作場所獲得了綽號“ Swyxbar”。

每個前端開發人員都應至少一次推動Scrollbar自定義的界限。但是，至關重要的是避免創建違反用戶期望的滾動條，尤其是在廣泛使用的產品中（如Google Wave所證明的那樣）。

以上是用自定義的滾動欄撐起你的東西的詳細內容。更多資訊請關注PHP中文網其他相關文章！