一些網頁的滾動條做得很精美，無論大小寬度，還是軌道背景樣式，都設計得非常漂亮，讓整張網頁UI看起來十分美觀舒服，那么它們是如何實現的呢？其實并不復雜，用CSS就能輕松達到你想要的效果。本文介紹如何用CSS自定義滾動條寬度及軌道背景顏色。

效果圖

demodownload

實例介紹

用純CSS自定義垂直滾動條寬度、顏色，以及軌道背景樣式，使背景軌道具有內嵌陰影，并且使滾動條具有漸變。

HTML代碼

<p>滾動條演示內容</p>
<p>滾動條演示內容</p>
<p>滾動條演示內容</p>

本實例演示滾動條效果，可以說是與HTML無特定要求，只要內容夠多，超過一個屏幕高度，就能看到滾動條出現。

CSS代碼

body::-webkit-scrollbar {
  width: 2em;
}
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, orange, darksalmon);
}

如你所見，CSS代碼主要是用了三個偽元素：::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb。

::-webkit-scrollbar 設置滾動條的寬度。

::-webkit-scrollbar-track 設置軌道陰影內嵌效果。

::-webkit-scrollbar-thumb 設置垂直滾動條漸變效果。

你可以在演示頁面改變這幾個屬性值，看看不同的顯示效果。

注意問題

本實例介紹的幾個CSS滾動條偽元素，在Chrome和Safari瀏覽器里表現完美，但不支持Firefox瀏覽器。

總結

本文介紹了如何用CSS自定義滾動條寬度及軌道背景顏色，了解CSS滾動條偽元素之后，其實只需幾行代碼那么簡單容易。

相關文章

• 4個純CSS自定義的炫酷醒目的滾動條
• 6個純CSS自定義的簡單而優雅的滾動條樣式

標簽: css  滾動條  scrollbar