Skip to content
Open
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
186 changes: 186 additions & 0 deletions css-overflow-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ spec:css-pseudo-4; type:selector; text:::first-letter
spec:css-pseudo-4; type:selector; text:::first-line
spec:css-writing-modes-4; type:dfn; text:start
spec:css-writing-modes-4; type:dfn; text:end
spec:css2; type:dfn; text:viewport
</pre>
<pre class="anchors">
url: https://drafts.csswg.org/selectors-3/#subject; type: dfn; text: subject;
Expand Down Expand Up @@ -1244,6 +1245,191 @@ Fragmentation of Overflow: the 'continue' property</h3>
This is regardless of whether this would cause any content after the [=clamp point=]
to be within the container's bounds.

<h2 id=overscroll-behaviors>
Overscroll Behaviors</h2>

<h3 id=scroll-chaining-and-boundary-default-actions>
Scroll chaining and boundary default actions</h3>

<em>Operating Systems have rules for scrolling such as scroll chaining and
overscroll affordances. This specification does not mandate if and how scroll
chaining or overscroll affordances be implemented. This specification only
allows the content author to disable them if any are implemented.</em>

<dfn>Scroll chaining</dfn> is when scrolling is propagated from one
[=scroll container=] to an ancestor [=scroll container=] following the
[=scroll chain=]. Typically scroll chaining is performed starting at the event
target recursing up the [=containing block chain=]. When a [=scroll container=]
in this chain receives a scroll event or gesture it may act on it and/or pass it
up the chain. Chaining typically occurs when the [=scrollport=] has reached its
boundary.

A <dfn>scroll chain</dfn> is the order in which scrolling is propagated from one
[=scroll container=] to another. The [=viewport=] participates in
[=scroll chaining=] as the document's {{Document/scrollingElement}}, both
regarding placement in the scroll chain as well as adhering to the chaining
rules applied to it.


<dfn export>Scroll boundary</dfn> refers to when the scroll position of a
[=scroll container=] reaches the edge of the [=scrollport=]. If a scroll
container has no potential to scroll, because it does not [=overflow=] in the
direction of the scroll, the element is always considered to be at the scroll
boundary.

<dfn>Boundary default action</dfn> refers to the user-agent-defined
default action performed when scrolling against the edge of the [=scrollport=].
A <dfn>local boundary default action</dfn> is a [=boundary default action=]
which is performed on the [=scroll container=] without interacting with the
page, for example displaying a overscroll UI affordance. Conversely, a
<dfn>non-local boundary default action</dfn> interacts with the page, for
example scroll chaining or a navigation action.


<h3 id=overscroll-behavior-properties>
Overscroll Behavior Properties</h3>

The <dfn>overscroll behavior</dfn> controls the permitted
[=boundary default action=] for a [=scroll container=] element when its
[=scrollport=] reaches the boundary of its scroll box.

The 'overscroll-behavior' property specifies the [=overscroll behavior=] for a
[=scroll container=] element. It allows the content author to specify that a
[=scroll container=] element must prevent scroll chaining and/or overscroll
affordances.

An element that is not [=scroll container=] must accept but ignore the values of
this property. This property must be applied to all scrolling methods supported
by the user agent.

Note: This property should provide guarantees that are, at least, as strong as
[=preventDefault=] for preventing both scroll chaining and overscroll. Doing
otherwise would cause content authors to use [=preventDefault=] instead.

<pre class=propdef>
Name: overscroll-behavior
Value: [ contain | none | auto ]{1,2}
Initial: auto auto
Applies to: <a>scroll container</a> elements
Inherited: no
Media: visual
Computed value: see individual properties
Animation type: discrete
Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
</pre>


The 'overscroll-behavior' property is a shorthand property that sets the
specified values of 'overscroll-behavior-x' and 'overscroll-behavior-y' in that
order. If only one value is specified, the second value defaults to the same
value.

Values have the following meanings:

<dl dfn-for="overscroll-behavior, overscroll-behavior-x, overscroll-behavior-y, overscroll-behavior-inline, overscroll-behavior-block" dfn-type="value">
<dt><dfn>contain</dfn>
<dd>
This value indicates that the element must not perform <a>non-local boundary default actions</a>
such as scroll chaining or navigation. The user agent must not perform scroll chaining to any
ancestors along the <a>scroll chain</a> regardless of whether the scroll originated at this
element or one of its descendants. This value must not modify the behavior of how <a>local
boundary default actions</a> should behave, such as showing any overscroll affordances.
<dt><dfn>none</dfn>
<dd>
This value implies the same behavior as <a value for=overscroll-behavior>contain</a> and in
addition this element must also not perform <a>local boundary default actions</a> such as
showing any overscroll affordances.
<dt><dfn>auto</dfn>
<dd>
This value indicates that the user agent should perform the usual <a>boundary default action</a>
with respect to <a>scroll chaining</a>, overscroll and navigation gestures.
</dl>

Note: In the case where a user agent does not implement scroll chaining and
overscroll affordances, these values will have no side effects for a compliant
implementation.

Note: Programmatic scrolling is clamped and can not trigger any
[=boundary default actions=].

<h3 id=overscroll-positioned>
Overscroll and Positioned Elements</h3>

This specification does not generally dictate what, if any, "overscroll" or
similar actions might occur as a [=local boundary default action=].

However, if a user agent <em>does</em> use "overscroll" behavior (that is,
allowing a scrollable element to be scrolled slightly "past the end" of its
scrollable area, usually with a "rubber-banding" effect after the scroll or drag
is completed), then the following applies:

If an element uses [=fixed positioning=] and is positioned relative to the
[=initial containing block=], or is a [=sticky positioned=] element which is
currently stuck to the [=viewport=], then when the [=root scroller=] experiences
"overscroll", that element <em>must not</em> overscroll with the rest of the
document's content; it must instead remain positioned as if the scroller was at
its minimum/maximum scroll position, whichever it will return to when the
overscroll is finished.

Even tho this can visually shift the fixed/sticky element relative to other
elements on the page, it must be treated purely as a visual effect, and not
reported as an actual layout/position change to APIs such as
{{Element/getBoundingClientRect()}}.

Note: This behavior is because fixpos and viewport-stuck stickypos elements are
positioned relative to "the viewport", which is conceptually above the
root scroller in the page hierarchy (effectively, it's the [=scroll container=]
holding the root scroller). Thus, overscrolling the root scroller shouldn't
have any effect on them, just like how an abspos that is a child of a scroller
but whose abspos containing block is <em>above</em> the scroller isn't affected
by the scroller doing anything at all, including overscroll.


<h3 id=overscroll-behavior-longhands-physical>
Physical Longhands for 'overscroll-behavior'</h3>

<pre class=propdef>
Name: overscroll-behavior-x, overscroll-behavior-y
Value: contain | none | auto
Initial: auto
Applies to: <a>scroll container</a> elements
Inherited: no
Logical property group: overscroll-behavior
Percentages: N/A
Media: visual
Computed value: as specified
Animation type: discrete
Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
</pre>

The 'overscroll-behavior-x' property specifies the <a>overscroll behavior</a> in the horizontal
axis and the 'overscroll-behavior-y' property specifies the <a>overscroll behavior</a> in the
vertical axis. When scrolling is performed along both the horizontal and vertical axes at the
same time, the <a>overscroll behavior</a> of each respective axis should be considered
independently.


<h3 id=overscroll-behavior-longhands-logical>
Flow-relative Longhands for 'overscroll-behavior'</h3>

<pre class=propdef>
Name: overscroll-behavior-inline, overscroll-behavior-block
Value: contain | none | auto
Initial: auto
Applies to: <a>scroll container</a> elements
Inherited: no
Logical property group: overscroll-behavior
Percentages: N/A
Media: visual
Computed value: as specified
Animation type: discrete
Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
</pre>

These properties correspond to the 'overscroll-behavior-x' and
'overscroll-behavior-y' properties. The mapping depends on the element's
'writing-mode'.

<h2 id=sbg-ext class=nonum>
Appendix A: Possible extensions for ''scrollbar-gutter''</h2>

Expand Down