CSS - scrollbar-color 屬性

CSS scrollbar-color 屬性允許您設定捲軸滑塊和軌道顏色的樣式。

捲軸滑塊是捲軸的可移動部分，您可以上下拖動它來滾動網頁內容。捲軸軌道是捲軸的背景。

可能的值

auto − 預設值。瀏覽器將使用其預設的捲軸顏色。
<color> <color> − 此屬性可以取兩個值，一個用於捲軸滑塊的顏色，另一個用於捲軸軌道的顏色。

應用於

滾動框。

DOM 語法

object.style.scrollbarColor= "auto|color color";

scrollbar-color 屬性僅受 Firefox 瀏覽器支援。

CSS 捲軸顏色 - 自動值

以下示例演示如何使用 scrollbar-color: auto 屬性獲取瀏覽器的預設捲軸顏色：

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-color: auto; 
      border: 2px solid red;
   }
</style>
</head>
<body>
   <h3>This example is only supported by Firefox Browser.</h3>
   <div class="scroll-container">
      <div class="scrolling-section">
         <h2>scrollbar-color</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
      </div>
   </div>
</body>
</html>

CSS 捲軸顏色 - 顏色值

以下示例演示如何使用 scrollbar-color CSS 屬性更改捲軸軌道和滑塊的顏色：

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-color: pink yellow; 
      border: 2px solid red;
   }
</style>
</head>
<body>
   <h3>This example is only supported by Firefox Browser.</h3>
   <div class="scroll-container">
      <div class="scrolling-section">
         <h2>scrollbar-color</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
      </div>
   </div>
</body>
</html>

列印頁面