CSS - 捲軸

捲軸是使用者介面元素，允許使用者瀏覽無法完全顯示在可見區域內的長內容。

它們由垂直或水平條組成，帶有一個可拖動的滑塊，使使用者能夠向上/向下或向左/向右移動內容。

務必在不同的瀏覽器和裝置上測試您的捲軸樣式，以確保其按預期工作。

如何設定捲軸樣式？

建立一個容器元素，例如 div，以容納內容和捲軸。
將容器元素的高度設定為固定值。
將 overflow: auto 屬性新增到容器元素以啟用捲軸。
使用 :-webkit-scrollbar 偽元素來設定捲軸的樣式。

div {
   width: 370px;
   height: 120px;
   overflow: auto; 
}
div::-webkit-scrollbar {
   width: 15px;
}

使用 CSS 屬性（寬度、高度、背景顏色、邊框、圓角）自定義捲軸。

捲軸選擇器

對於 WebKit 瀏覽器（Chrome、Safari、Edge），您可以使用以下偽元素來更改捲軸。

::-webkit-scrollbar 選擇整個捲軸以設定其樣式。
::-webkit-scrollbar-button 選擇捲軸頂部和底部的按鈕。
::-webkit-scrollbar-thumb 選擇可拖動的滾動滑塊。
::-webkit-scrollbar-track 選擇捲軸的背景軌道。
::-webkit-scrollbar-track-piece 選擇捲軸軌道中滑塊頂部和底部位置之間的中間部分。
::-webkit-scrollbar-corner 選擇捲軸的底部角，即水平和垂直捲軸的交匯處。
::-webkit-resizer 選擇捲軸底部可拖動的調整器。

建立自定義捲軸

以下示例演示瞭如何使用 -webkit-scrollbar CSS 偽元素建立和設定基本捲軸的樣式。

示例

此示例僅在 WebKit 瀏覽器（Chrome、Safari、Edge）上才能正常工作。

<html>
<head>
<style>
   div {
      width: 100%;
      height: 120px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 35px;
   }
   div::-webkit-scrollbar-track {
      background: yellow; 
   }
   div::-webkit-scrollbar-thumb {
      background: green; 
      border-radius: 10px;
   }
   div::-webkit-scrollbar-thumb:hover {
      background: darkgreen; 
   }
</style>
</head>

<body>
   <div>
      <h3>
         Scrollbars using -webkit-scrollbar
      </h3>
      This block includes a large amount of content 
      to demonstrate how scrollbars work when there 
      is an overflow within an element box. 
      They consist of vertical or horizontal bars 
      with a draggable thumb, enabling users to 
      move content up and down or left to right.
      <br>
      <strong>Changes Made:</strong>
      <br>
      Changed Scrollbar Thumb Color
      <br>
      Changed Scrollbar background Color
      <br>
      Add Hover effect to thumb
   </div>
</body>
</html>

設定 CSS 捲軸樣式

以下示例演示瞭如何使用 -webkit-scrollbar 偽元素設定捲軸的樣式，透過新增顏色、寬度、邊框和圓角來自定義其外觀 -

示例