CSS - ::webkit-scrollbar 屬性

CSS ::webkit-scrollbar 偽元素

CSS ::-webkit-scrollbar 偽元素用於設定元素捲軸的樣式。這是一個非標準的 CSS 屬性，僅受基於 WebKit 的瀏覽器支援，例如 Chrome、Safari 和 Edge。

以下 ::-webkit-scrollbar 偽元素可用於設定捲軸樣式

::-webkit-scrollbar-track − 用於設定捲軸軌道（邊框、背景顏色）的樣式。
::-webkit-scrollbar-thumb − 用於設定捲軸滑塊（可拖動的滾動控制代碼）的樣式。
::-webkit-scrollbar-button − 用於設定捲軸按鈕（向上和向下指向的箭頭，每次滾動一行）的樣式。
::-webkit-scrollbar-corner − 用於設定水平和垂直捲軸相交處的捲軸角的樣式。
::-webkit-resizer − 出現在某些元素底角的可拖動調整大小控制代碼。
::-webkit-scrollbar:horizontal{} − 用於設定元素水平捲軸的樣式。
::-webkit-scrollbar:vertical{} − 用於設定元素垂直捲軸的樣式。
::-webkit-scrollbar-track-piece − 用於設定軌道（進度條）中未被控制代碼覆蓋的部分的樣式。

下圖演示了滾動 WebKit 結構，供參考

以下示例演示瞭如何使用 ::-webkit-scrollbar CSS 偽元素來更改 WebKit 瀏覽器（例如 Safari 和 Chrome）中捲軸的外觀 −

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      scrollbar-color: #8b8484 #ddd; 
      scroll-margin-block-end: 20px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track {
      background: #f1f1f1; 
   }
   div::-webkit-scrollbar-thumb {
      background: #f02222;  
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #f55d5d;
   }
   h3 {
      color: #DC4299;
   }
</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 the content up and down or left to right.
   </div>
</body>
</html>

以下示例演示瞭如何使用 ::-webkit-scrollbar-button 偽元素來設定元素捲軸按鈕的樣式。捲軸按鈕是捲軸頂部和底部的兩個箭頭。

<html>
<head>
<style>
   div {
      width: 370px;
      height: 150px;
      scrollbar-color: #8b8484 #ddd; 
      scroll-margin-block-end: 20px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track {
      background: #f1f1f1; 
   }
   div::-webkit-scrollbar-thumb {
      background: #888; 
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #555; 
   }
   div::-webkit-scrollbar-button {
      height: 30px;
      background-color: rgb(19, 201, 19); 
      border: 2px solid rgb(245, 9, 155);
      border-radius: 20px;
   }
   h3 {
      color: #DC4299;
   }
</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 the content up and down or left to right.
   </div>
</body>
</html>

您可以使用 ::-webkit-scrollbar 偽元素來設定垂直捲軸的任何屬性樣式，例如其顏色、寬度、邊框和圓角。

這是一個示例 −

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      scrollbar-color: #8b8484 #ddd; 
      scroll-margin-block-end: 20px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track:vertical {
      background: #f1f1f1; 
   }
   div::-webkit-scrollbar-thumb:vertical {
      background: rgb(16, 230, 16);
      border-radius: 15px;
   }
   div::-webkit-scrollbar-thumb:vertical:hover {
      background: rgb(224, 44, 209); 
   }
   h3 {
      color: #DC4299;
   }
</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 the content up and down or left to right.
   </div>
</body>
</html>

您可以使用 ::-webkit-scrollbar-track-piece 偽元素來設定元素垂直捲軸軌道部分的樣式。

這是一個示例 −

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      scrollbar-color: #8b8484 #ddd; 
      scroll-margin-block-end: 20px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track-piece {
      background-color: rgb(91, 210, 214);  
   }
   div::-webkit-scrollbar-thumb {
      background: rgb(21, 160, 21);
      border-radius: 10px; 
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #e449dc; 
   }
   h3 {
      color: #DC4299;
   }
</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 the content up and down or left to right.
   </div>
</body>
</html>

這是一個使用 ::-webkit-scrollbar CSS 屬性（例如 box-shadow 和 background-color 以及 border）在基於 WebKit 的瀏覽器中設定捲軸樣式的示例 −

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track {
      box-shadow: inset 0 0 10px rgb(128, 197, 207);
   }
   div::-webkit-scrollbar-thumb { 
      border: 1px solid #e21111;
      background-color: #2ce43b; 
      border-radius: 5px; 
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #e045c7; 
      border: 1px solid #11e22d;
   }
   h3 {
      color: #DC4299;
   }
</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 the content up and down or left to right.
   </div>
</body>
</html>

列印頁面