@@ -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,10 @@ 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
+
207
234
Note: Some platforms only have a tiny scrollbar by default
208
235
which cannot be reasonably made thinner.
209
236
In such cases, this value will behave as ''scrollbar-width/auto'' .
@@ -230,6 +257,13 @@ authors should use ''overflow: hidden'' instead of ''scrollbar-width: none''.
230
257
</dd>
231
258
</dl>
232
259
260
+ <div class=note> Note: Users who find the ''thin'' style of scrollbars unusable
261
+ can include the following rule in their [=user style sheet=] :
262
+ <pre><code class=lang-css> * { scrollbar-width: auto !important; }</code></pre>
263
+ This will ensure that all scrollbars are sized as per OS and UA settings
264
+ regardless of author styles.
265
+ </div>
266
+
233
267
UAs must apply the 'scrollbar-width' value set on the root element to the viewport.
234
268
235
269
Note: Unlike the 'overflow' property (and its longhands),
0 commit comments