數十種自定義多彩多樣滾動條樣式

pc端開發過程中有沒有遇到過因為原生滾動條的樣式問題，讓整個項目事倍功半；有沒有遇到過因為因為默認滾動條的緣故，被客戶說頁面做得真chou，一條毀所有呀。

接下來，下面你看到的，就是完美解決方案！當然，有這麼多，不限制於這麼多，隨意修改，百花盛開。

Demo1

css源碼

.srcoll_one::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}
.srcoll_one::-webkit-scrollbar{
 width: 12px; 

 background-color: #F5F5F5;
}
.srcoll_one::-webkit-scrollbar-thumb{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #4078cb;
}

html源碼

Demo2

css源碼

.srcoll_two::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_two::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_two::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(top,
 #e4f5fc 0%,
 #bfe8f9 50%,
 #9fd8ef 51%,
 #2ab0ed 100%);
}

html源碼

Demo3

css源碼

.srcoll_three::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_three::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_three::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-gradient(linear,
 40% 0%,
 75% 84%,
 from(#4D9C41),
 to(#19911D),
 color-stop(.6,#54DE5D))
}

html源碼

Demo4

css源碼

.srcoll_four::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}
.srcoll_four::-webkit-scrollbar{
 width: 12px;
 background-color: #F5F5F5;
}
.srcoll_four::-webkit-scrollbar-thumb{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #D62929;
}

html源碼

Demo5

css源碼

.srcoll_five::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_five::-webkit-scrollbar{
 width: 6px;
 background-color: #F5F5F5;
}
.srcoll_five::-webkit-scrollbar-thumb{
\tbackground-color: #000000;
}

html源碼

Demo6

css源碼

.srcoll_six::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_six::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_six::-webkit-scrollbar-thumb{
 background-color: #000000;
 border: 2px solid #555555;
}

html源碼

Demo7

css源碼

.srcoll_seven::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_seven::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_seven::-webkit-scrollbar-thumb{
 background-color: #0ae;
 background-image: -webkit-gradient(linear, 0 0, 0 100%,
 color-stop(.5, rgba(255, 255, 255, .2)),
 color-stop(.5, transparent), to(transparent));
}

html源碼

Demo8

css源碼

.srcoll_eight::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_eight::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_eight::-webkit-scrollbar-thumb{
 background-color: #F90;
 background-image: -webkit-linear-gradient(45deg,
 rgba(255, 255, 255, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, .2) 50%,
 rgba(255, 255, 255, .2) 75%,
 transparent 75%,
 transparent)
}

html源碼

Demo9

css源碼

.srcoll_nine::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_nine::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_nine::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-image: -webkit-gradient(linear,
 left bottom,
 left top,
 color-stop(0.44, rgb(122,153,217)),
 color-stop(0.72, rgb(73,125,189)),
 color-stop(0.86, rgb(28,58,148)));
}

html源碼

Demo10

css源碼

.srcoll_ten::-webkit-scrollbar-track{
 border: 1px solid black;
 background-color: #F5F5F5;
}
.srcoll_ten::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_ten::-webkit-scrollbar-thumb{
\tbackground-color: #000000;
}

html源碼

Demo11

css源碼

.srcoll_eleven::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_eleven::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_eleven::-webkit-scrollbar-thumb{
 background-color: #F90;
 background-image: -webkit-linear-gradient(90deg,
 rgba(255, 255, 255, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, .2) 50%,
 rgba(255, 255, 255, .2) 75%,
 transparent 75%,
 transparent)
}

html源碼

Demo12

css源碼

.srcoll_twelve::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_twelve::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_twelve::-webkit-scrollbar-thumb{
 background-color: #AAA;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(90deg,
 rgba(0, 0, 0, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(0, 0, 0, .2) 50%,
 rgba(0, 0, 0, .2) 75%,
 transparent 75%,
 transparent)
}

html源碼

Demo13

css源碼

.srcoll_thirteen::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_thirteen::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_thirteen::-webkit-scrollbar-thumb{
 background-color: #3366FF;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(0deg,
 rgba(255, 255, 255, 0.5) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, 0.5) 50%,
 rgba(255, 255, 255, 0.5) 75%,
 transparent 75%,
 transparent)
}

html源碼

Demo14

css源碼

.srcoll_fourteen::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #444444;
}
.srcoll_fourteen::-webkit-scrollbar{
 width: 12px;
 background-color: #F5F5F5;
}
.srcoll_fourteen::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
 transparent,
 rgba(0, 0, 0, 0.4) 50%,
 transparent,
 transparent)
}

html源碼

搬你想搬，蓋你所需，碼字不易，且行且珍惜！

閱讀更多 孟繁勝遊 的文章

關鍵字: HTML 滾動條 WebKit