卡卡網(wǎng)

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

效果圖

demodownload

實例介紹

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

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>

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

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

CSS代碼

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

div {
    display: block;
}

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

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

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

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

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

#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è)置滾動條的背景顏色及透明度。

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

效果圖

注意問題

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

總結(jié)

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

相關(guān)文章

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

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