標籤

｜CSS｜Make a Custom Scrollbar with CSS

Make a Custom Scrollbar with CSS

想自訂網頁的捲軸 (Scrollbar) 更符合整體風格，可以透過 CSS 自訂捲軸外觀，這篇將介紹兩種方法：WebKit 偽元素和標準 CSS 屬性。

首先說明這次範例 html 結構，padding-mask 為上下 padding 的遮罩，scroll-con 為放文字內容的捲軸區塊。

html


          

          

          

              
Title

以下是範例 css 的部分，scroll-con 放文字內容的捲軸區塊 height 需規範明確範圍，設定 overflow-y:auto; 為超出範圍時才出現捲軸。

css
/* 捲軸區塊 */
.scroll-con{ width: 100%; height: 100%; /* height 需規範明確範圍 100%  */
             overflow-y: auto; /* 超出範圍時才出現捲軸 */
          }

接下來可以開始進行自訂捲軸外觀：
方法1.使用 WebKit 偽元素，提供完整的客製化能力，可以調整捲軸的顏色、大小等 (Firefox 不支援)，以下是範例的 css。 

css
/* Approach-1 偽元素 WebKit scrollbar 共通 */
.scroll-block ::-webkit-scrollbar{ /* 整體捲軸大小 */
    width: var(--scrollbar-width);
}
.scroll-block:hover ::-webkit-scrollbar-thumb{
    cursor: pointer; 
}

/* color-a */
.approach-1.color-a ::-webkit-scrollbar-thumb{ /* 滾動條 */
    background-image: linear-gradient( 45deg, #61fffd 0%, #b9ff56 100%);
}
.approach-1.color-a:hover ::-webkit-scrollbar-thumb{
    background-image: linear-gradient( 45deg, #00f6ff 0%, #95ff00 100%);
}
.approach-1.color-a ::-webkit-scrollbar-track{ /* 滾動條軌道 */
    background-color: rgba(255, 255, 255, 0);
}

/* color-b */
.approach-1.color-b ::-webkit-scrollbar{ /* 整體捲軸大小 */
     width: calc( var(--scrollbar-width) * 1.2 );
}
.approach-1.color-b ::-webkit-scrollbar-thumb{ /* 滾動條 */
    background-color: #e29eff;
    border-left: 3px solid #000;
}
.approach-1.color-b:hover ::-webkit-scrollbar-thumb{
    background-color: #e567d3;
}
.approach-1.color-b ::-webkit-scrollbar-track{ /* 滾動條軌道 */
    background-color: #000;
    border-left: 3px solid #000;
}

WebKit 偽元素 ScrollBar 說明：

::-webkit-scrollbar 設定整體捲軸大小。width 設定垂直捲軸寬度、height 設定水平捲軸寬度
::-webkit-scrollbar-thumb 設定滾動條 (可移動)，可設定 border-radius、border、linear-gradient。
::-webkit-scrollbar-track 設定滾動條軌道，可設定 border-radius、border、linear-gradient。

方法2.使用 scrollbar-color、scrollbar-width 標準 CSS 屬性 (Safari 不支援)，以下是範例的 css。 

css
/* Approach-2 標準 css 屬性 scrollbar */
/* color-c */
.approach-2.color-c .scroll-con{ /* 滾動條和箭頭 滾動條軌道 */
      scrollbar-color: #f0b2ff #fff;
      scrollbar-width: thin;
}
.approach-2.color-c:hover .scroll-con{
      scrollbar-color: #e567d3 #fff;
}
/* color-d */
.approach-2.color-d .scroll-con{
      scrollbar-color: #5ce3e5 #000;
      scrollbar-width: thin;
}
.approach-2.color-d:hover .scroll-con{
      scrollbar-color: #73fffa #000;
}

CSS 標準屬性 ScrollBar 說明：

scrollbar-color 第一個值是滾動條 (可移動)、上下箭頭的顏色，第二個值是滾動條軌道的顏色。
scrollbar-width 設定整體捲軸寬度，auto (預設寬度)、thin (細小寬度)、none (隱藏捲軸，依然可以滾動)。
標籤：