卷轴样式 ( scrollbar )

一般来说在浏览网页时，不会刻意去调整“卷轴”样式，但如果有特殊版面需求，调整卷轴样式就能产生非常吸睛的效果，这篇教学会介绍 CSS 设定卷轴样式的语法，例如通用型的 crollbar-color、scrollbar-gutter 和 scrollbar-width 样式属性，也会介绍 webkit 开头的 scrollbar 选择器，透过选择器的方式让卷轴更多变化。

快速导览：

• scrollbar-color、scrollbar-gutter、scrollbar-width
• webkit scrollbar 选择器

scrollbar-color、scrollbar-gutter、scrollbar-width

scrollbar-color、scrollbar-gutter、scrollbar-width 是三种 CSS 原生修改卷轴样式的样式属性，都具有继承特性，相关说明如下：

注意，目前仍有少部分浏览器不支援调整卷轴样式。

下方范例呈现这三个样式属性的效果，如果要观察 scrollbar-gutter 效果，需要使用会根据宽度收折的内容才能看出差异。

线上展示：https://codepen.io/oxxo/pen/GgKrdOG

<!-- 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- 开头的是“选择器”，表示组成卷轴的所有元件都是可以选取的元素，也因为是元素，所以呈现时会有“阶层”的分别。

下方范例使用六个 div 呈现不同的卷轴样式，第一个是默认值，接下来每个都会额外增加 ::-webkit- 选择器选取特定卷轴元素调整样式。

线上展示：https://codepen.io/oxxo/pen/pvzRKmd

<!-- 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 可单独控制垂直卷轴样式，下方范例会让水平和垂直卷轴呈现不同样式。

线上展示：https://codepen.io/oxxo/pen/pvzRKXd

<!-- 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 调整拉霸样式的技巧，就能让版面更好看，更不受限于浏览器默认丑丑的拉霸样式了。

意见反馈