前端開發｜自定義網頁捲軸(Scrollbar)樣式

這篇文章主要跟大家分享如何自定義網頁捲軸(Scrollbar)的樣式。

從這篇文章你會知道：

如何自定義網頁捲軸的樣式
如何自定義網頁容器的捲軸樣式
獨屬於Firefox的自定義方式
只針對非觸控裝置修改樣式

延伸閱讀：
https://www.astralweb.com.tw/using-sass-map/

最近在處理專案的時候，遇到客戶一個需求：商品目錄頁上的篩選器都要限制高度，超過就讓他出現捲軸。因為客戶設定的篩選條件很多，畫面上滿滿的捲軸，簡直是慘不忍睹。果然在測試階段，PM說話了，他說：雖然在他的筆電上看似一切都很美好，但是他不小心發現在別人的電腦上，出現了滿滿的灰色大捲軸，畫面實在太驚人，所以要求要改善。實在是各家瀏覽器預設的捲軸樣式都不一樣呀。有胖有瘦，還有半透明懸浮在頁面上的捲軸，為了解決這個滿滿大捲軸的問題，我們決定自定義捲軸的樣式，以下就是這次事件使用到的相關CSS

自訂網頁捲軸樣式的寫法：

/* 捲軸寬度及高度 */
::-webkit-scrollbar {
  width: 10px; /*右側捲軸寬度*/
  height: 10px; /*下方捲軸高度*/
}
/* 軌道背景底色 */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* 滑桿顏色 */
::-webkit-scrollbar-thumb {
  background: #df5a2e; 
}
/* 滑桿滑鼠滑入時的顏色 */
::-webkit-scrollbar-thumb:hover {
  background: #bd451d; 
}
/* 捲軸兩側頂端的按鈕 */
::-webkit-scrollbar-button {
  background-color: #a73d1a;
}
/* 捲軸兩側頂端的按鈕滑鼠滑入時的顏色 */
::-webkit-scrollbar-button:hover {
  background-color: #65250f;
}

以上的寫法會改變整頁的捲軸樣式

CSS 也可以針對個別容器設定捲軸樣式，值得注意的是，如果是針對個別容設定樣式，樣式只會影響容易本身，不會影響容器內的子容器

針對容器的寫法：

/* 捲軸寬度及高度 */
container::-webkit-scrollbar {
  width: 10px; /*右側捲軸寬度*/
  height: 10px; /*下方捲軸高度*/
}
/* 軌道背景底色 */
container::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* 滑桿顏色 */
container::-webkit-scrollbar-thumb {
  background: #df5a2e; 
}
/* 滑桿滑鼠滑入時的顏色 */
container::-webkit-scrollbar-thumb:hover {
  background: #bd451d; 
}
/* 捲軸兩側頂端的按鈕 */
container::-webkit-scrollbar-button {
  background-color: #a73d1a;
}
/* 捲軸兩側頂端的按鈕滑鼠滑入時的顏色 */
container::-webkit-scrollbar-button:hover {
  background-color: #65250f;
}

另外上面的寫法對Firefox沒有作用，針對Firefox我們要另外設定

/* 對全頁做設定 */
html {
  scrollbar-color: #df5a2e #f1f1f1;
  scrollbar-width: thin;
}


/* 對容器做設定 */ 
.container {
  scrollbar-color: #df5a2e #f1f1f1;
  scrollbar-width: thin;
}

上面scrollbar-color 有2個色彩值、第一個是滑桿的顏色、第二個是捲軸的底色。Firefox無法設定滑桿滑入時的顏色。

scrollbar-width 則有3種選項：auto, thin, none。分別是預設值，細，以及隱捲軸，有別於其他瀏覽器可以直接指定寬度的像素值。

更多關於Firefox的scrollbar樣式設定可以參考
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scrollbars_styling

如果您喜歡觸控裝置的隱型scrollbar的作法，只想針對非觸控裝置進行修改、還可以搭配使用CSS Media Query 來達成

@media screen and (hover: hover) {
    自訂樣式... 
}

關於CSS Media Query hover的作用、可以參考
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

程式碼示範：https://codepen.io/ellen-shih/pen/BaGbpoZ

〖參考資料來源〗

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scrollbars_styling

以上就是歐斯瑞本次『前端開發｜自定義網頁捲軸(Scrollbar)的樣式』的分享

記得訂閱歐斯瑞的電子報、追蹤臉書粉絲團及IG，收到更多相關實用資訊！也歡迎與我們聯繫。

前端開發, 技術應用

前端開發｜自定義網頁捲軸(Scrollbar)樣式