卡卡網(wǎng)

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

效果圖

demodownload

實例介紹

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

HTML代碼

<p>滾動條演示內(nèi)容</p>
<p>滾動條演示內(nèi)容</p>
<p>滾動條演示內(nèi)容</p>

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

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 設(shè)置滾動條的寬度。

::-webkit-scrollbar-track 設(shè)置軌道陰影內(nèi)嵌效果。

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

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

注意問題

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

總結(jié)

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

相關(guān)文章

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

標簽: css  滾動條  scrollbar