CSS 属性

CSS 滚动条颜色属性允许您设置滚动条缩略图和轨道的颜色。

滚动条缩略图是滚动条的可移动部分，您可以上下拖动以滚动内容一个网页的。滚动条轨道是滚动条的背景。

属性值

  • 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>A man can succeed at almost anything for which he has unlimited enthusiasm.</p>
         <p>无论何事，只要对它有无限的热情你就能取得成功。</p>
      </div>
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    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>A man can succeed at almost anything for which he has unlimited enthusiasm.</p>
         <p>无论何事，只要对它有无限的热情你就能取得成功。</p>
      </div>
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22