Skip to content

Commit e29a8fd

Browse files
frivoalfrivoal
committed
[css-overflow] Define scrollbar-gutter
Closes w3c#92
1 parent ae22e36 commit e29a8fd

1 file changed

Lines changed: 177 additions & 10 deletions

File tree

‎css-overflow/Overview.bs‎

Lines changed: 177 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -478,17 +478,184 @@ Introduction</h2>
478478
(including propagation of 'direction' to the ICB).
479479
</p>
480480

481+
<h2 id="scollbar-gutter-property">
482+
Reserving space for the scrollbar: the 'scrollbar-gutter' property</h2>
483+
484+
The space between the inner border edge and the outer padding edge
485+
which user agents may reserve to display the scrollbar
486+
is called the <dfn>scrollbar gutter</dfn>.
487+
488+
The 'scrollbar-gutter' property gives control to the author
489+
over the presence of <a>scrollbar gutters</a>
490+
separately from the ability to control the presence of scrollbars
491+
provided by the 'overflow' property.
492+
493+
<pre class="propdef">
494+
Name: scrollbar-gutter
495+
Value: ''auto'' | [ ''stable'' | ''always'' ] && ''both''? && ''force''?
496+
Initial: auto
497+
Inherited: yes
498+
Computed value: specified value
499+
</pre>
481500

482-
<p class="issue">
483-
[[CSS3-MARQUEE]] describes an 'overflow-style' property,
484-
but it has not picked up implementation experience
485-
that the working group is aware of.
486-
Should this document treat 'overflow-style' as a defunct proposal,
487-
or should this document describe the 'overflow-style' property
488-
and attempt to revive it,
489-
despite that implementations have implemented
490-
'overflow-x' and 'overflow-y' instead?
491-
</p>
501+
This property affects the presence of <a>scrollbar gutters</a>
502+
placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box.
503+
504+
The presence of a <a>scrollbar gutter</a>
505+
at the <a>block start</a> edge and <a>block end</a> edge of the box
506+
cannot be controlled in this level,
507+
and is determined the same way as the presence of <a>scrollbar gutters</a>
508+
placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box
509+
when 'scrollbar-gutter' is ''scrollbar-gutter/auto''.
510+
511+
Scrollbars which by default are placed over the content box
512+
and do not cause <a>scrollbar gutters</a> to be created
513+
are called <dfn>overlay scrollbars</dfn>.
514+
Such scrollbars are usually partially transparent, revealing the content behind them if any.
515+
Their appearance and size may vary
516+
based on whether and how the user is interacting with them.
517+
518+
Scrollbars which are always placed in a <a>scrollbar gutter</a>,
519+
consuming space when present,
520+
are called <dfn>classic scrollbars</dfn>.
521+
Such scrollbars are usually opaque.
522+
523+
Whether <a>classic scrollbars</a> or <a>overlay scrollbars</a> are used is UA defined.
524+
525+
The appearance and size of the scrollbar is UA defined.
526+
527+
Whether scrollbars appear on the start or end edge of the box is UA defined.
528+
529+
For <a>classic scrollbars</a>,
530+
the width of the <a>scrollbar gutter</a> is the same as the width of the scrollbar.
531+
For <a>overlay scrollbars</a>,
532+
the width of the <a>scrollbar gutter</a> is UA defined.
533+
However, it must not be 0,
534+
and it must not change based on user interactions with the page or the scrollbar
535+
even if the scrollbar itself changes.
536+
Also, it must be the same for all elements in the page.
537+
538+
The values of this property have the following meaning:
539+
540+
<dl dfn-for="scrollbar-gutter">
541+
<dt><dfn>''scrollbar-gutter/auto''</dfn>
542+
<dd><a>Classic scrollbars</a> consume space by creating a <a>scrollbar gutter</a>
543+
when 'overflow' is ''overflow/scroll',
544+
or when 'overflow' is ''overflow/auto'' and the box is overflowing.
545+
<a>Overlay scrollbars</a> do not consume space.
546+
547+
<dt><dfn>''stable''</dfn>
548+
<dd>The <a>scrollbar gutter</a> is present when
549+
'overflow' is ''overflow/scroll'' or ''overflow/auto''
550+
and the scrollbar is a <a>classic scrollbar</a>
551+
even if the box is not overflowing,
552+
but not when the scrollbar is an <a>overlay scrollbar</a>.
553+
554+
<dt><dfn>''always''</dfn>
555+
<dd>The <a>scrollbar gutter</a> is always present when
556+
'overflow' is ''overflow/scroll'' or ''overflow/auto'',
557+
regardless of the type of scrollbar or
558+
of whether the box is overflowing.
559+
560+
<dt><dfn>''both''</dfn>
561+
<dd>If a <a>scrollbar gutter</a> would be present
562+
on one of the inline start edge or the inline end edge of the box,
563+
another <a>scrollbar gutter</a> must be present on the opposite edge as well.
564+
565+
<dt><dfn>''force''</dfn>
566+
<dd>When the ''scrollbar-gutter/force'' keyword is present
567+
''scrollbar-gutter/stable'' and ''scrollbar-gutter/always'' take effect
568+
when 'overflow' is ''overflow/visible'', ''overflow/hidden'' or ''overflow/clip''
569+
in addition ''overflow/auto'' or ''overflow/scroll''.
570+
This does not cause a scrollbar to be displayed, only a <a>scrollbar gutter</a>.
571+
</dl>
572+
573+
When the <a>scrollbar gutter</a> is present but the scrollbar is not,
574+
or the scrollbar is transparent or otherwise does not fully obscure the <a>scrollbar gutter</a>,
575+
the background of the <a>scrollbar gutter</a> must be painted as an extension of the padding.
576+
577+
<div class=note>
578+
Note: The following table summarises the interaction of 'overflow' and 'scrollbar-gutter',
579+
showing in which case space is reserved for the <a>scrollbar gutter</a>.
580+
In this table, “G” represents cases where space is reserved for the <a>scrollbar gutter</a>,
581+
“f?” cases where space is reserved for the <a>scrollbar gutter</a>
582+
if ''scrollbar-gutter/force'' was specified,
583+
and empty cells cases where the no space is reserved.
584+
585+
<table class=data>
586+
<thead>
587+
<tr>
588+
<td>
589+
<td>
590+
<th colspan=2>Classic scrollbars
591+
<th colspan=2>Overlay scrollbars
592+
<tr>
593+
<th>'overflow'
594+
<th>'scrollbar-gutter'
595+
<th>Overflowing
596+
<th>Not overflowing
597+
<th>Overflowing
598+
<th>Not overflowing
599+
</thead>
600+
<tr>
601+
<th rowspan=3>'overflow/scroll'
602+
<th>''scrollbar-gutter/auto''
603+
<td>G
604+
<td>G
605+
<td>
606+
<td>
607+
<tr>
608+
<th>''scrollbar-gutter/stable''
609+
<td>G
610+
<td>G
611+
<td>
612+
<td>
613+
<tr>
614+
<th>''scrollbar-gutter/always''
615+
<td>G
616+
<td>G
617+
<td>G
618+
<td>G
619+
<tr>
620+
<th rowspan=3>''overflow/auto''
621+
<th>''scrollbar-gutter/auto''
622+
<td>G
623+
<td>
624+
<td>
625+
<td>
626+
<tr>
627+
<th>''scrollbar-gutter/stable''
628+
<td>G
629+
<td>G
630+
<td>
631+
<td>
632+
<tr>
633+
<th>''scrollbar-gutter/always''
634+
<td>G
635+
<td>G
636+
<td>G
637+
<td>G
638+
<tr>
639+
<th rowspan=3>''overflow/visible'', ''overflow/hidden'', ''overflow/clip''
640+
<th>''scrollbar-gutter/auto''
641+
<td>
642+
<td>
643+
<td>
644+
<td>
645+
<tr>
646+
<th>''scrollbar-gutter/stable''
647+
<td>f?
648+
<td>f?
649+
<td>
650+
<td>
651+
<tr>
652+
<th>''scrollbar-gutter/always''
653+
<td>f?
654+
<td>f?
655+
<td>f?
656+
<td>f?
657+
</table>
658+
</div>
492659
493660
<h2 id="fragmentation">Fragmentation of overflow</h2>
494661

0 commit comments

Comments
 (0)