files/zh-cn/web/css/scrollbar-width/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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

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

<p> <strong><code>scrollbar-width</code></strong> 属性允许开发者设置滚动条出现时的厚度</p>

<p>{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}</p>

<p>{{cssinfo}}</p>

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

<pre class="brush: css">/* Keyword values */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

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

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

<dl>
 <dt><var>&lt;scrollbar-width&gt;</var></dt>
 <dd>将滚动条的宽度定义为数值宽度或者预定义宽度，当被定义为预定义宽度时，则必须为下列值之一：
 <table class="standard-table">
  <tbody>
   <tr>
    <td><code>auto</code></td>
    <td>系统默认的滚动条宽度</td>
   </tr>
   <tr>
    <td><code>thin</code></td>
    <td>系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度</td>
   </tr>
   <tr>
    <td><code>none</code></td>
    <td>不显示滚动条，但是该元素依然可以滚动</td>
   </tr>
  </tbody>
 </table>

 <p class="note"><span>注意：scrollbar-width的长度值有可能从规范中删除，scrollbar-width属性本身也是如此。</span> (<a href="https://github.com/w3c/csswg-drafts/issues/1958">Issue 1958</a>)</p>

 <div class="note">
 <p><strong>Note</strong>: User Agents must apply any <code>scrollbar-width</code> value set on the root element to the viewport.</p>
 </div>
 </dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">{{CSSSyntax}}</pre>

<h2 id="Example" name="Example">Example</h2>

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

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

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

<pre class="brush: html">&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="Result">Result</h3>

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

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}</td>
   <td>{{Spec2("CSS Scrollbars")}}</td>
   <td>Initial Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>


<p>{{Compat("css.properties.scrollbar-width")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{CSSxRef("-ms-overflow-style")}}</li>
 <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
</ul>