@@ -192,9 +192,32 @@ Percentages: n/a
192
192
This property allows the author to specify
193
193
the desired thickness of an element’s scrollbars.
194
194
195
+ <div class=advisement>
196
+ The primary purpose of this property is not
197
+ to allow authors to chose a particular scrollbar aesthetic for their pages,
198
+ but to let them indicate for certain small or cramped elements of their pages
199
+ that a smaller scrollbar would be desirable.
200
+
201
+ Scrollbars are a UI mechanism essential to interact with the page.
202
+ Operating systems tend to want consistency in such controls to improve usability through familiarity,
203
+ and users with specific preferences or needs can adjust
204
+ the appearance of various UI components, including scrollbars,
205
+ through OS or UA settings.
206
+
207
+ While using this property in support of specific UX goals is appropriate,
208
+ authors should otherwise refrain from overriding such user preferences.
209
+ </div>
210
+
195
211
<dl dfn-type="value" dfn-for=scrollbar-width>
196
212
<dt> <dfn>auto</dfn> </dt>
197
- <dd> Implementations must use the default platform scrollbar width.
213
+ <dd> Implementations must use the default scrollbar width.
214
+
215
+ Note: On most systems, this corresponds to the traditional somewhat wide scrollbar.
216
+ However, through OS or UA settings,
217
+ users can have the ability to change what this default corresponds to,
218
+ possibly making the default scrollbar
219
+ wider or narrower than is typical.
220
+
198
221
</dd>
199
222
<dt> <dfn>thin</dfn> </dt>
200
223
<dd> Implementations should use thinner scrollbars than ''scrollbar-width/auto'' .
@@ -204,6 +227,11 @@ The scrollbar should nonetheless remain wide enough to be usable.
204
227
(Implementers may wish to consult
205
228
<a href="https://www.w3.org/TR/WCAG21/#target-size">WCAG 2.1 SC 2.5.5 Target Size</a> . [[WCAG21]] )
206
229
230
+ User agents may disregard this value and treat it as ''scrollbar-width/auto'' ,
231
+ for instance when the user has indicated discomfort
232
+ for thin scrollbars through some UA or OS setting.
233
+ (User agents are encouraged to provide such a setting.)
234
+
207
235
Note: Some platforms only have a tiny scrollbar by default
208
236
which cannot be reasonably made thinner.
209
237
In such cases, this value will behave as ''scrollbar-width/auto'' .
@@ -230,6 +258,13 @@ authors should use ''overflow: hidden'' instead of ''scrollbar-width: none''.
230
258
</dd>
231
259
</dl>
232
260
261
+ <div class=note> Note: Users who find the ''thin'' style of scrollbars unusable
262
+ can include the following rule in their [=user style sheet=] :
263
+ <pre><code class=lang-css> * { scrollbar-width: auto !important; }</code></pre>
264
+ This will ensure that all scrollbars are sized as per OS and UA settings
265
+ regardless of author styles.
266
+ </div>
267
+
233
268
UAs must apply the 'scrollbar-width' value set on the root element to the viewport.
234
269
235
270
Note: Unlike the 'overflow' property (and its longhands),
0 commit comments