::-webkit-scrollbar 是 CSS 的一種虛擬（偽）類別選擇器，可以針對特定元件或全局修改其捲軸樣式，但僅適用於支援 WebKit 的瀏覽器，舉例來說：Chrome、Edge 與 Safari 都可以看到效果。它有許多相關的選擇器可以使用，常用的列在下面：
::-webkit-scrollbar-button捲軸上的按鈕（上下箭頭）
::-webkit-scrollbar-thumb捲軸本體
::-webkit-scrollbar-track捲軸底（本體滑動的軌道）
::-webkit-scrollbar-corner同時有垂直與水平捲軸時交會的部分
直接使用 ::-webkit-scrollbar 是針對全局，而若要指定某一區塊修改捲軸，可指定 class 或 id，例如 .block::-webkit-scrollbar 是針對 block 這個 class 的區塊進行捲軸的修改。講了這麼多，實際使用一次才能更加理解，這裡我就分別以全局跟指定區塊共兩種方式實作。
全局捲軸
HTML 請隨便塞東西，一堆 <br> 讓垂直捲軸發揮作用，CSS 如下：
/*-- 全局捲軸 --*/
/* 捲軸底 */
::-webkit-scrollbar-track {
background-color: #cdcdcd73;
box-shadow: inset 0px 0px 3px #9b9b9b;
}
/* 捲軸寬度 */
::-webkit-scrollbar {
overflow: visible;
width: 12px;
}
/* 捲軸本體(正常) */
::-webkit-scrollbar-thumb {
background: #19bdc5;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.07);
}
/* 捲軸本體(游標接觸) */
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
}
/* 捲軸本體(游標點擊) */
::-webkit-scrollbar-thumb:active {
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.65);
}這個會是一個藍色的全局捲軸，沒有上下箭頭。
區塊捲軸
HTML 先用個 <div> 並給予 block 這個 class，接著將它先暫時指定寬高都為 200px，裏頭塞滿東西再加一堆 <br> 讓垂直捲軸發揮作用，CSS 如下：
/*-- 指定區塊內捲軸 --*/
.block {
width: 200px;
height: 200px;
padding: 5px;
overflow-y: auto;
background-color: #dedede;
}
/* 捲軸底 */
.block::-webkit-scrollbar-track {
background-color: #cdcdcd73;
box-shadow: inset 0px 0px 3px #9b9b9b;
}
/* 捲軸寬度 */
.block::-webkit-scrollbar {
overflow: visible;
width: 8px;
}
/* 捲軸本體(正常) */
.block::-webkit-scrollbar-thumb {
background: #18a253;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.07);
border-radius: 4px;
}
/* 捲軸本體(游標接觸) */
.block::-webkit-scrollbar-thumb:hover {
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
}
/* 捲軸本體(游標點擊) */
.block::-webkit-scrollbar-thumb:active {
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.65);
}
/* 捲軸上下按鈕 */
.block::-webkit-scrollbar-button:single-button {
background: #bbbbbb;
display: block;
border-style: solid;
height: 8px;
}
/* 捲軸往上按鈕 */
.block::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0 4px 4px 4px;
border-color: transparent transparent #555 transparent;
}
.block::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
border-color: transparent transparent #777 transparent;
}
/* 捲軸往下按鈕 */
.block::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 4px 4px 0 4px;
border-color: #555 transparent transparent transparent;
}
.block::-webkit-scrollbar-button:vertical:single-button:increment:hover {
border-color: #777 transparent transparent transparent;
}這是一個綠色的區塊捲軸，捲軸本體有設定圓角，另外有上下箭頭可以使用。
※ 請注意，文檔有告知這個選擇器是非標準的，盡量不要用在產品環境中。
CodePen
融合了本次所有的示範。
See the Pen
::-webkit-scrollbar 純 CSS 捲軸 by Feng, Cheng-Chi (@qwe987299)
on CodePen.
▲ 精選圖片。
留言區 / Comments
萌芽論壇