::-webkit-scrollbar 純 CSS 捲軸

2021/12/16 1,740 2 網站技術 , CSS

::-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.


▲ 精選圖片。

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇