Skip to content

Commit

Permalink
[css-overscroll-1] Per WG resolution, fixpos and viewport-stuck stick…
Browse files Browse the repository at this point in the history
…ypos don't overscroll. #6299
  • Loading branch information
tabatkins committed Jun 1, 2022
1 parent cd2ad9b commit 617c50c
Showing 1 changed file with 45 additions and 23 deletions.
68 changes: 45 additions & 23 deletions css-overscroll-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,6 @@ Abstract: This allows content authors to hint that the <a>boundary default actio
Abstract: such as scroll chaining and overscroll, should not be triggered.
</pre>

<pre class='anchors'>
urlPrefix: https://www.w3.org/TR/css-display-3/
type: dfn; text: containing block chain
url: https://drafts.csswg.org/css-overflow-3/#scroll-container
type: dfn; text: scroll container
type: dfn; text: scroll containers
url: https://drafts.csswg.org/cssom-view/#viewport
type: dfn; text: viewport
url: https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement
type: dfn; text: scrollingElement
url: https://www.w3.org/TR/uievents/#default-action
type: dfn; text: default action
type: dfn; text: default actions
url: https://dom.spec.whatwg.org/#dom-event-preventdefault
type: dfn; text: preventDefault
url: https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener
type: dfn; text: passive flag

</pre>

Introduction {#intro}
=====================
Expand All @@ -45,20 +26,20 @@ A content author does not necessarily want <a>scroll chaining</a> to occur for a
containers</a>. Some <a>scroll containers</a> may be part of a <a>containing block chain</a> but may
serve a different logical purpose in the document and may want to prevent scrolling from continuing
up the <a>scroll chain</a>. To achieve this, a content author will install event listeners without
the <a>passive flag</a> set and will use <a>preventDefault</a> when there is a risk that scroll
the <a>passive flag</a> set and will use {{Event/preventDefault()}} when there is a risk that scroll
chaining will occur. This is detrimental for the following reasons:

* The user agent may in the future introduce new input methods for scrolling that are not supported
by the content author's event listeners.
* A non passive event listener will delay scrolling because the user agent will have to wait for the
result of the event listener to determine if <a>preventDefault</a> was called causing increased
result of the event listener to determine if {{Event/preventDefault()}} was called causing increased
scroll latency.
* When scrolling is performed near the edge of the <a>scroll boundary</a>, the <a>default action</a>
may cause both scrolling to the edge of the <a>scroll container</a> and a <a>boundary default
action</a>. Calling <a>preventDefault</a> will not only cancel the <a>boundary default action</a>
action</a>. Calling {{Event/preventDefault()}} will not only cancel the <a>boundary default action</a>
but also the scroll to the edge of the <a>scrollport</a>.
* The <a>default action</a> for the event may also provide additional behavior that the author does
not want to cancel such as an overscroll affordance. <a>preventDefault</a> doesn't allow the
not want to cancel such as an overscroll affordance. {{Event/preventDefault()}} doesn't allow the
content author to cancel only some of the <a>default actions</a> such as scroll chaining.

Thus, it is not possible for a content author to control <a>scroll chaining</a> and overscroll in a
Expand Down Expand Up @@ -222,6 +203,47 @@ these values will have no side effects for a compliant implementation.

Note: Programmatic scrolling is clamped and can not trigger any <a>boundary default actions</a>.

Overscroll and Positioned Elements {#overscroll-positioned}
----------------------------------

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.


Physical Longhands for 'overscroll-behavior' {#overscroll-behavior-longhands-physical}
---------------------------------------------------------------------------------------
Expand Down

0 comments on commit 617c50c

Please sign in to comment.