卡卡網(wǎng)

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

效果圖

demodownload

實(shí)例介紹

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

HTML代碼

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

本實(shí)例演示滾動(dòng)條效果，可以說是與HTML無特定要求，只要內(nèi)容夠多，超過一個(gè)屏幕高度，就能看到滾動(dòng)條出現(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代碼主要是用了三個(gè)偽元素：::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb。

::-webkit-scrollbar 設(shè)置滾動(dòng)條的寬度。

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

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

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

注意問題

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

總結(jié)

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

相關(guān)文章

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

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