---
title: scrollbar-color
slug: Web/CSS/scrollbar-color
translation_of: Web/CSS/scrollbar-color
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p><strong><code>scrollbar-color</code></strong><font>该</font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><font>CSS</font></a><font>属性设置滚动条轨道和拇指的颜色</font></p>

<p><strong>track（<font><font>轨道</font></font>）</strong><font><font>是指滚动条，其一般是固定的而不管滚动位置的背景。</font></font></p>

<p><strong>thumb</strong>（<strong><font><font>拇指</font></font></strong>）是<font><font>指滚动条通常漂浮在轨道的顶部上的移动部分。</font></font></p>

<p>{{CSSInfo}}</p>

<h2 id="Syntax" name="Syntax">句法</h2>

<pre class="brush: css notranslate">/* Keyword values */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/* &lt;color&gt; values */
scrollbar-color: rebeccapurple green;   /* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. */

/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;
</pre>

<h3 id="Values" name="Values"><font>值</font></h3>

<dl>
 <dt><code>&lt;scrollbar-color&gt;</code></dt>
 <dd>定义滚动条的颜色。
 <table class="standard-table">
  <tbody>
   <tr>
    <td><code>auto</code></td>
    <td>在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分默认平台渲染。</td>
   </tr>
   <tr>
    <td><code>dark</code></td>
    <td>显示黑色滚动条，可以是平台提供的滚动条的深色变体，也可以是带深色的自定义滚动条。</td>
   </tr>
   <tr>
    <td><code>light</code></td>
    <td>显示一个轻量滚动条，可以是平台提供的滚动条的轻微变体，也可以是带有浅色的自定义滚动条。</td>
   </tr>
   <tr>
    <td><code>&lt;color&gt; &lt;color&gt;</code></td>
    <td>将第一种颜色应用于滚动条拇指，第二种颜色应用于滚动条轨道。</td>
   </tr>
  </tbody>
 </table>

 <div class="note">
 <p><strong><font><font>注意</font></font></strong>: <font><font>用户代理必须将</font></font><code>scrollbar-color</code><font><font>根元素上设置的</font><font>任何</font><font>值</font><font>应用于</font><font>视口。</font></font></p>
 </div>
 </dd>
</dl>

<h3 id="形式语法"><font><font>形式语法</font></font></h3>

{{CSSSyntax}}

<h2 id="Example" name="Example"><font><font>例子</font></font></h2>

<h3 id="CSS">CSS</h3>

<pre class="brush:css notranslate">.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;div class="scroller"&gt;Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/div&gt;</pre>

<h3 id="结果">结果</h3>

<div>{{EmbedLiveSample("Example")}}</div>

<h2 id="可访问性问题"><font><font>可访问性问题</font></font></h2>

<p><font><font>使用</font></font><code>scrollbar-color</code><font><font>具有特定颜色值的属性时，作者应确保指定的颜色在它们之间具有足够的对比度。</font><font>对于关键字值，UA应确保其使用的颜色具有足够的对比度。</font><font>参见</font></font><a href="https://www.w3.org/TR/WCAG20-TECHS/G183.html"><font><font>WCAG 2.0的技术：G183：使用3：1的对比度</font></font></a><font><font>。</font></font></p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规格</th>
   <th scope="col">状态</th>
   <th scope="col">评论</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}</td>
   <td>{{Spec2("CSS Scrollbars")}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2>



<div>{{Compat("css.properties.scrollbar-color")}}</div>