files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

---
title: '::-webkit-scrollbar'
slug: 'Web/CSS/::-webkit-scrollbar'
tags:
  - '::-webkit-scrollbar'
  - CSS
  - 'CSS:WebKit Extensions'
translation_of: 'Web/CSS/::-webkit-scrollbar'
---
<p>{{Draft()}}{{CSSRef}}{{Non-standard_header}}</p>

<h2 id="描述">描述</h2>

<p>这个 <font face="Consolas, Liberation Mono, Courier, monospace">::-webkit-scrollbar</font> CSS伪类选择器影响了一个元素的滚动条的样式</p>

<div class="note">
<p><code>::-webkit-scrollbar</code> 仅仅在支持<a class="external external-icon" href="https://webkit.org">WebKit</a>的浏览器<span style="font-size: 85%;"> (例如, 谷歌Chrome, 苹果Safari)可以使用</span>.</p>
</div>

<h2 id="CSS滚动条选择器">CSS滚动条选择器</h2>

<p>你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:</p>

<ul>
 <li><code>::-webkit-scrollbar</code> — 整个滚动条.</li>
 <li><code>::-webkit-scrollbar-button</code> — 滚动条上的按钮 (上下箭头).</li>
 <li><code>::-webkit-scrollbar-thumb</code> — 滚动条上的滚动滑块.</li>
 <li><code>::-webkit-scrollbar-track</code> — 滚动条轨道.</li>
 <li><code>::-webkit-scrollbar-track-piece</code> — 滚动条没有滑块的轨道部分.</li>
 <li><code>::-webkit-scrollbar-corner</code> — 当同时有垂直滚动条和水平滚动条时交汇的部分.</li>
 <li><code>::-webkit-resizer</code> — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).</li>
</ul>

<h2 id="语法">语法</h2>

<pre><font face="Consolas, Liberation Mono, Courier, monospace">::-webkit-scrollbar { <em>styles here</em> }</font>
</pre>

<h2 id="例子">例子</h2>

<pre class="brush: css">.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000;
}
</pre>

<pre class="brush: html">&lt;div class="visible-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;/div&gt;
&lt;div class="invisible-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;/div&gt;
&lt;div class="mostly-customized-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;br&gt;
And pretty tall&lt;br&gt;
thing with weird scrollbars.&lt;br&gt;
Who thought scrollbars could be made weeeeird?&lt;/div&gt;
</pre>

<p>{{EmbedLiveSample('Example')}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>WebKit论坛 <a href="https://webkit.org/blog/363/styling-scrollbars/">Styling Scrollbars</a></li>
 <li><a href="https://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html">WebKit test</a> for scrollbar styles mentioned above</li>
 <li>{{cssxref('-ms-overflow-style')}}</li>
</ul>