捲軸樣式 scrollbar
一般來說在瀏覽網頁時，不會刻意去調整「捲軸」樣式，但如果有特殊版面需求，調整捲軸樣式就能產生非常吸睛的效果，這篇教學會介紹 CSS 設定捲軸樣式的語法，例如通用型的 crollbar-color、scrollbar-gutter 和 scrollbar-width 樣式屬性，也會介紹 webkit 開頭的 scrollbar 選擇器，透過選擇器的方式讓捲軸更多變化。
快速導覽：
scrollbar-color、scrollbar-gutter、scrollbar-width
scrollbar-color、scrollbar-gutter、scrollbar-width 是三種 CSS 原生修改捲軸樣式的樣式屬性，都具有繼承特性，相關說明如下：
注意，目前仍有少部分瀏覽器不支援調整捲軸樣式。
| 樣式屬性 | 屬性值 | 說明 |
|---|---|---|
scrollbar-color |
auto ( 預設 )、color color ( 捲軸拉霸、捲軸底色 ) | 捲軸顏色 |
scrollbar-width |
auto ( 預設 )、thin ( 細 )、none ( 無 ) | 捲軸寬度 |
scrollbar-gutter |
auto ( 預設 )、stable ( 右側出現 )、stable both-edges ( 左右都出現 ) | 捲軸空間 |
下方範例呈現這三個樣式屬性的效果，如果要觀察 scrollbar-gutter 效果，需要使用會根據寬度收折的內容才能看出差異。
<!-- HTML 程式碼 -->
<h2>scrollbar-color</h2>
<div class="a1">apple<br>banana<br>oxxo<br>orange<br>papaya<br>peach</div>
<div class="a2">apple<br>banana<br>oxxo<br>orange<br>papaya<br>peach</div>
<h2>scrollbar-width</h2>
<div class="b1">apple<br>banana<br>oxxo<br>orange<br>papaya<br>peach</div>
<div class="b2">apple<br>banana<br>oxxo<br>orange<br>papaya<br>peach</div>
<h2>scrollbar-gutterr</h2>
<div class="c1">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="c2">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="c3">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 100px;
border: 1px solid #000;
overflow-y: auto;
margin: 5px;
float: left;
}
h2 {
margin: 0;
padding: 20px 5px 5px;
clear: both;
}
.c1, .c2, .c3 {height: 150px;}
.a1 {scrollbar-color: red orange;} /* 拉霸紅色，底色橘色 */
.a2 {scrollbar-color: yellow blue;} /* 拉霸黃色，底色藍色 */
.b1 {scrollbar-width: auto;} /* 預設寬度 */
.b2 {scrollbar-width: thin;} /* 寬度較細 */
.c1 {scrollbar-gutter: auto;} /* 預設值，在沒有出現捲軸時，左右正常間距 */
.c2 {scrollbar-gutter: stable;} /* 預設值，在沒有出現捲軸時，右側保留捲軸空間 */
div.c3 {scrollbar-gutter: stable both-edges;} /* 預設值，在沒有出現捲軸時，右側保留捲軸空間，左側出現裝訂空間 */
</style>
webkit scrollbar 選擇器
除了原生控制捲軸的樣式屬性，Chrome 或 Safari 等支援「::-webkit-」選擇器的瀏覽器，很早就已經支援卷軸樣式的調整，而新版的 Edge 目前已經支援 ::-webkit- 選擇器，但 firebox 或 IE 則不支援相關寫法。由於 ::-webkit- 開頭的是「選擇器」，表示組成捲軸的所有元件都是可以選取的元素，也因為是元素，所以呈現時會有「階層」的分別。
| 樣式屬性 | 說明 |
|---|---|
::-webkit-scrollbar |
捲軸背景 ( 必要樣式，設定後會同步設定其他捲軸元素寬高 ) |
::-webkit-scrollbar-thumb |
捲軸拉霸 |
::-webkit-scrollbar-track |
捲軸拉霸之外的空間 |
::-webkit-scrollbar-track-piece |
捲軸拉霸 + 捲軸拉霸之外的空間 |
::-webkit-scrollbar-corner |
水平與垂直捲軸交會的角落 |
::-webkit-scrollbar-button |
捲軸按鈕 ( Mac 無此元素 ) |
::-webkit-resizer |
捲軸空間 ( Mac 無此元素 ) |
下方範例使用六個 div 呈現不同的捲軸樣式，第一個是預設值，接下來每個都會額外增加 ::-webkit- 選擇器選取特定捲軸元素調整樣式。
<!-- HTML 程式碼 -->
<div>apple12345678987654321<br>banana<br>oxxo<br>orange<br>papaya<br>peach<br>grape</div>
<h3>預設</h3>
<div class="a1">apple12345678987654321<br>banana<br>oxxo<br>orange<br>papaya<br>peach<br>grape</div>
<h3>::-webkit-scrollbar<br>::-webkit-scrollbar-thumb</h3>
<div class="a2">apple12345678987654321<br>banana<br>oxxo<br>orange<br>papaya<br>peach<br>grape</div>
<h3>::-webkit-scrollbar<br>::-webkit-scrollbar-thumb 加上圓角半徑<br>::-webkit-scrollbar-track</h3>
<div class="a3">apple12345678987654321<br>banana<br>oxxo<br>orange<br>papaya<br>peach<br>grape</div>
<h3>::-webkit-scrollbar<br>::-webkit-scrollbar-thumb<br>::-webkit-scrollbar-track 加上圓角半徑<br>::-webkit-scrollbar-track-piece</h3>
<div class="a4">apple12345678987654321<br>banana<br>oxxo<br>orange<br>papaya<br>peach<br>grape</div>
<h3>::-webkit-scrollbar<br>::-webkit-scrollbar-thumb<br>::-webkit-scrollbar-track<br>::-webkit-scrollbar-track-piece 不同圓角半徑</h3>
<div class="a5">apple12345678987654321<br>banana<br>oxxo<br>orange<br>papaya<br>peach<br>grape</div>
<h3>::-webkit-scrollbar<br>::-webkit-scrollbar-thumb<br>::-webkit-scrollbar-track<br>::-webkit-scrollbar-track-piece<br>::-webkit-scrollbar-corner</h3>
<!-- CSS 程式碼 -->
<style>
div {
width: 150px;
height: 150px;
border: 1px solid #000;
overflow: scroll;
margin: 5px;
resize: both;
}
h3 {
margin: 0;
padding: 20px 10px;
font-size:15px;
float: left;
}
div {
float: left;
clear: both;
margin: 20px 0 0 20px;
}
div:last-of-type {margin-bottom: 50px;}
/* 捲軸背景綠色，垂直捲軸寬度 40px，水平捲軸高度 20px */
div[class]::-webkit-scrollbar {
width: 40px;
height: 20px;
background: green;
}
/* 捲軸拉霸紅色 */
div[class]::-webkit-scrollbar-thumb {background: red;}
/* a2~a5 拉霸半徑 20px */
.a2::-webkit-scrollbar-thumb,
.a3::-webkit-scrollbar-thumb,
.a4::-webkit-scrollbar-thumb,
.a5::-webkit-scrollbar-thumb{
border-radius: 20px;
}
/* a2~a5 拉霸之外的顏色 orange */
.a2::-webkit-scrollbar-track,
.a3::-webkit-scrollbar-track,
.a4::-webkit-scrollbar-track,
.a5::-webkit-scrollbar-track{
background: orange;
}
/* a3~a5 捲軸之上的底色 cyan */
.a3::-webkit-scrollbar-track-piece,
.a4::-webkit-scrollbar-track-piece,
.a5::-webkit-scrollbar-track-piece{
background: cyan;
}
/* a3~a5 捲軸之上的底色圓角半徑 20px */
.a3::-webkit-scrollbar-track-piece,
.a4::-webkit-scrollbar-track-piece,
.a5::-webkit-scrollbar-track-piece{
border-radius: 20px;
}
/* a2~a5 拉霸之外的區塊圓角半徑 10px */
.a4::-webkit-scrollbar-track,
.a5::-webkit-scrollbar-track {
border-radius: 10px;
}
/* a5 交會角落黑色 */
.a5::-webkit-scrollbar-corner {
background: black;
}
</style>
如果在選擇器後方加上 :horizontal 可單獨控制水平捲軸樣式，加上 :vertical 可單獨控制垂直捲軸樣式，下方範例會讓水平和垂直捲軸呈現不同樣式。
<!-- HTML 程式碼 -->
<div>apple0.1.2.3.45.6.7.8.9.8.7.6.5.4.3.2.1.0<br>banana<br>oxxo<br>orange<br>papaya<br>peach<br>grape<br>banana<br>oxxo<br>orange<br>papaya<br>peach<br>grape</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: scroll;
margin: 5px;
resize: both;
}
div::-webkit-scrollbar {
width: 50px;
height: 20px;
background: green;
}
div::-webkit-scrollbar-thumb:horizontal {background: red;} /* 水平拉霸 */
div::-webkit-scrollbar-thumb:vertical {background: #0c0;} /* 垂直拉霸 */
div::-webkit-scrollbar-thumb:vertical{border-radius: 25px;} /* 垂直拉霸圓角 */
div::-webkit-scrollbar-track{background: orange;}
div::-webkit-scrollbar-track-piece:vertical{background: cyan;} /* 垂直非拉霸底色 */
div::-webkit-scrollbar-track-piece:horizontal{background: pink;} /* 水平非拉霸底色 */
div::-webkit-scrollbar-track-piece:vertical{border-radius: 25px;} /* 垂直非拉霸圓角 */
div::-webkit-scrollbar-track:vertical{border-radius: 15px;} /* 垂直非拉霸下層圓角 */
</style>
小結
雖然調整 scrollbar 的用處不多，但對於想要讓版面更有一致性的設計師來說就格外重要，透過這些 CSS 調整拉霸樣式的技巧，就能讓版面更好看，更不受限於瀏覽器預設醜醜的拉霸樣式了。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～