Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update scrollbar-gutter description #6512

Merged
merged 1 commit into from
Jul 2, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 11 additions & 31 deletions files/en-us/web/css/scrollbar-gutter/index.html
Original file line number Diff line number Diff line change
@@ -26,17 +26,9 @@ <h2 id="Syntax">Syntax</h2>
<pre class="brush:css no-line-numbers">/* Initial value */
scrollbar-gutter: auto;

/* "stable" keyword, with optional modifiers */
/* "stable" keyword, with optional modifier */
scrollbar-gutter: stable;
scrollbar-gutter: stable both;
scrollbar-gutter: stable force;
scrollbar-gutter: stable both force;

/* "always" keyword, with optional modifiers */
scrollbar-gutter: always;
scrollbar-gutter: always both;
scrollbar-gutter: always force;
scrollbar-gutter: always both force;
scrollbar-gutter: stable mirror;

/* Global values */
scrollbar-gutter: inherit;
@@ -50,13 +42,9 @@ <h3 id="Values">Values</h3>
<dt><code>auto</code></dt>
<dd>The initial value. Classic scrollbars create a gutter when <code>overflow</code> is <code>scroll</code>, or when <code>overflow</code> is <code>auto</code> and the box is overflowing. Overlay scrollbars do not consume space.</dd>
<dt><code>stable</code></dt>
<dd>When using classic scrollbars, the gutter will be present if <code>overflow</code> is <code>scroll</code> or <code>auto</code> even if the box is not overflowing. When using overlay scrollbars, the gutter will not be present.</dd>
<dt><code>always</code></dt>
<dd>The scrollbar gutter will always be present when <code>overflow</code> is <code>scroll</code> or <code>auto</code>, regardless of the type of scrollbar or of whether the box is overflowing.</dd>
<dt><code>both</code></dt>
<dd>When using classic scrollbars, the gutter will be present if <code>overflow</code> is <code>auto</code>, <code>scroll</code>, or <code>hidden</code> even if the box is not overflowing. When using overlay scrollbars, the gutter will not be present.</dd>
<dt><code>mirror</code></dt>
<dd>If a gutter would be present on one of the inline start/end edges of the box, another will be present on the opposite edge as well.</dd>
<dt><code>force</code></dt>
<dd>The keywords <code>stable</code> and <code>always</code> will also be in effect when <code>overflow</code> is <code>visible</code>, <code>hidden</code> or <code>clip</code>. Only the gutter will be displayed, not a scrollbar.</dd>
</dl>

<h2 id="Formal_definition">Formal definition</h2>
@@ -71,41 +59,33 @@ <h2 id="Examples">Examples</h2>

<h3 id="Example_1">Example 1</h3>

<p>Prevent layout changes when the content grows or shrinks:</p>
<p>Prevent unneeded layout changes as the content growing or shrinking causes the scrollbar to appear/disappear:</p>

<pre class="brush: css">.container {
scrollbar-gutter: stable;
}
</pre>

<h3 id="Example_2">Example 2</h3>

<p>Prevent an overlay scrollbar from obscuring content:</p>

<pre class="brush: css">.container {
scrollbar-gutter: always;
}
</pre>

<h3 id="Example_3">Example 3</h3>

<p>Keep the symmetry between both sides of the box:</p>
<p>Add symmetric spacing to both sides of the box so the content is centered:</p>

<pre class="brush: css">.container {
scrollbar-gutter: stable both;
scrollbar-gutter: stable mirror;
}
</pre>

<h3 id="Example_4">Example 4</h3>

<p>Reserve the same amount of space on the edges of an element that is adjacent to a scrolling element as is being reserved in the latter, so that both line up visually:</p>
<p>Align the contents of a non-scrolling element and a scrolling one adjacent to it:</p>

<pre class="brush: css">.header {
scrollbar-gutter: always force;
overflow: hidden;
scrollbar-gutter: stable;
}

.container {
scrollbar-gutter: always;
scrollbar-gutter: stable;
}
</pre>