卡卡網(wǎng)

前面介紹了6個(gè)純CSS自定義的簡(jiǎn)單而優(yōu)雅的滾動(dòng)條樣式，在本文中，將創(chuàng)建富有創(chuàng)造力和有趣的滾動(dòng)條，同樣地，它們都是由純CSS來(lái)實(shí)現(xiàn)的。

效果圖

demodownload

實(shí)例介紹

純CSS完成，創(chuàng)建各種有趣的滾動(dòng)條，甚至滾動(dòng)條可以使用圖片來(lái)代替。

HTML代碼

<div class="scrollbar" id="scrollbar1"></div>
<div class="scrollbar" id="scrollbar2"></div>
<div class="scrollbar" id="scrollbar3"></div>
<div class="scrollbar" id="scrollbar4"></div>

滾動(dòng)條容器為一個(gè)div標(biāo)簽，該div標(biāo)簽的class屬性值為scrollbar。

scrollbar1、scrollbar2... 是div的標(biāo)識(shí)，它們顯示不同的滾動(dòng)條樣式。

CSS代碼

div設(shè)置盒子屬性，這里是以塊(block)的顯示方式。

div {
    display: block;
}

.scrollbar設(shè)置滾動(dòng)條樣式：定位、長(zhǎng)寬、邊距、溢出顯示方式。

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

偽 ::scrollbar 元素設(shè)置，它設(shè)置的是滾動(dòng)條的寬度。

#scrollbar3::-webkit-scrollbar {
    width: 20px;
}

偽 ::scrollbar-thumb 元素設(shè)置，它設(shè)置的是滾動(dòng)條的樣式。滾動(dòng)條可以用圖片代替，如下代碼。

#scrollbar3::-webkit-scrollbar-thumb {
    background-image: url(arrow.png);
    background-position: center top;
    background-repeat: no-repeat, no-repeat;
    background-size: 50px;
}

偽 ::scrollbar-track 元素設(shè)置，它設(shè)置滾動(dòng)條的背景顏色及透明度。

#scrollbar3::-webkit-scrollbar-track {
    background-color: transparent;
}

效果圖

注意問(wèn)題

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

總結(jié)

本文介紹了4個(gè)純CSS自定義的炫酷醒目的滾動(dòng)條，令人驚訝的是，滾動(dòng)條可以使用圖片來(lái)代替，這可以充分發(fā)揮我們的創(chuàng)造力，創(chuàng)建一些有趣的滾動(dòng)條。如果你也喜歡這些效果的滾動(dòng)條，那么可以直接下載源碼使用，非常方便。

相關(guān)文章

• 6個(gè)純CSS自定義的簡(jiǎn)單而優(yōu)雅的滾動(dòng)條樣式

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