卡卡網(wǎng)

自定義滾動(dòng)條樣式可讓網(wǎng)頁(yè)整體UI看起來(lái)更加美觀。本文介紹6個(gè)純CSS自定義的簡(jiǎn)單而優(yōu)雅的滾動(dòng)條。

效果如圖

demodownload

實(shí)例介紹

純CSS設(shè)置滾動(dòng)條屬性樣式，滾動(dòng)條樣式包括滾動(dòng)條以及軌道背景的樣式：寬度、圓角或方角、透明度、顏色等。

HTML代碼

<div class="scrollbar" id="scrollbar1">內(nèi)容</div>
<div class="scrollbar" id="scrollbar2">內(nèi)容</div>
<div class="scrollbar" id="scrollbar3">內(nèi)容</div>

內(nèi)容盒子是一個(gè)div，其class屬性值是scrollbar。

scrollbar1、scrollbar2、scrollbar3分別設(shè)置不同的滾動(dòng)條樣式。

CSS代碼

div屬性設(shè)置

div {
    display: block;
}

.scrollbar屬性設(shè)置

.scrollbar {
    height: 300px;
    width: 50%;
    overflow: auto;
    padding: 0 10px;
}

偽 ::scrollbar 元素設(shè)置

#scrollbar1::-webkit-scrollbar {
    width: 10px;
}

偽 ::scrollbar-thumb 元素設(shè)置

#scrollbar1::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #d55959;
}

偽 ::scrollbar-track 元素設(shè)置

#scrollbar1::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e7e7e7;
    border: 1px solid #cacaca;
}

效果圖 

注意問(wèn)題

CSS選擇器 ::-webkit-scrollbar 、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track 并不是任何瀏覽器都支持，比如Firefox。所以如果你想應(yīng)用本實(shí)例，請(qǐng)了解一下你的用戶終端及需求。

總結(jié)

我們不必在涉及滾動(dòng)條樣式時(shí)發(fā)瘋，有時(shí)，只需要一個(gè)細(xì)微的變化就可以通過(guò)與整體主題相匹配的滾動(dòng)條來(lái)增強(qiáng)整體用戶體驗(yàn)。本文介紹了6個(gè)純CSS自定義的簡(jiǎn)單而優(yōu)雅的滾動(dòng)條樣式，自定義滾動(dòng)條樣式可讓網(wǎng)頁(yè)整體UI看起來(lái)更加美觀。由于是純CSS實(shí)現(xiàn)，所以使用非常方便。喜歡的朋友可以直接下載源碼使用。

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