卡卡網

自定義滾動條樣式可讓網頁整體UI看起來更加美觀。本文介紹6個純CSS自定義的簡單而優(yōu)雅的滾動條。

效果如圖

demodownload

實例介紹

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

HTML代碼

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

內容盒子是一個div，其class屬性值是scrollbar。

scrollbar1、scrollbar2、scrollbar3分別設置不同的滾動條樣式。

CSS代碼

div屬性設置

div {
    display: block;
}

.scrollbar屬性設置

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

偽 ::scrollbar 元素設置

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

偽 ::scrollbar-thumb 元素設置

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

偽 ::scrollbar-track 元素設置

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

效果圖 

注意問題

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

總結

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

標簽: 滾動條  scrollbar  css