From 648af40e8b2dffa2bdad21ce9eeb53f5c16779f5 Mon Sep 17 00:00:00 2001 From: Tab Atkins Date: Wed, 6 Sep 2017 12:06:55 -0700 Subject: [PATCH] Tombstone the spec and point everything to the CSSWG draft. --- README.md | 2 +- explainer.md | 2 + index.html | 349 +-------------------------------------------------- 3 files changed, 8 insertions(+), 345 deletions(-) diff --git a/README.md b/README.md index b0a434b..5cc2b5f 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Scroll Anchoring * [Explainer](explainer.md) -* [Draft spec](https://wicg.github.io/ScrollAnchoring) +* [Now a CSSWG specification!](https://drafts.csswg.org/css-scroll-anchoring) ## Implementation status diff --git a/explainer.md b/explainer.md index f344bd4..49c4850 100644 --- a/explainer.md +++ b/explainer.md @@ -1,5 +1,7 @@ # Scroll Anchoring +**Note, Scroll Anchoring is now a CSSWG specification: ** + Scroll anchoring is an [intervention](https://github.com/WICG/interventions) that adjusts the scroll position to reduce visible content "jumps". diff --git a/index.html b/index.html index a0a5e50..404556a 100644 --- a/index.html +++ b/index.html @@ -1,346 +1,7 @@ - - - Scroll Anchoring - - - - - -
-

- Changes in DOM elements above the visible region of a - scrolling box - can result in the page moving while the user is in the middle of consuming the content. -

-

- This spec proposes a mechanism to mitigate this jarring user experience by - keeping track of the position of an anchor node and adjusting the scroll - offset accordingly. -

-

- This spec also proposes an API for web developers to opt-out of this behavior. -

-
+Scroll Anchoring + +

Scroll Anchoring Has Migrated to the CSSWG

-
-

- Standardizing this proposal is tracked by a WICG interventions issue. -

-
- -
-

Introduction

-

- Today, users of the web are often distracted by content moving around due to - changes that occur outside the viewport. Examples include script inserting an - iframe containing an ad, or non-sized images loading on a slow network. -

-

- Historically the browser's default behavior has been to preserve the absolute - scroll position when such changes occur. This means that to avoid shifting - content, the webpage can attempt to reserve space on the page for anything - that will load later. In practice, few websites do this consistently. -

-

- Scroll anchoring aims to minimize surprising content shifts. It does this by - adjusting the scroll position to compensate for the changes outside the - viewport. -

-

- The explainer - document gives an informal overview of scroll anchoring. -

-
-
-

Description

-

- Scroll anchoring works by selecting a DOM node (the anchor node) whose - movement is used to determine adjustments to the scroll position. -

-
-

Anchor Node Selection

-

- Each scrolling box - aims to select an anchor node that is deep in the DOM and close to the - block start edge of its - optimal viewing region. -

-
- If the user agent does not support the - scroll-padding - property, the optimal viewing region of the scrolling box is equivalent to its - content area. -
-

- The anchor node is either a non-anonymous - block box - or a text node. - The anchor node is always a descendant - of the scrolling box. - In some cases, a scrolling box may not select any anchor node. -

-

- The anchor node selection algorithm for a scrolling box S - is as follows: -

    -
  1. - If S is associated with an element whose computed value of the - overflow-anchor property is - none, then do not select an anchor node for S. -
    2. -
  2. - Otherwise, for each DOM child N of the element or document associated with S, perform - the candidate examination algorithm for N in S, - and terminate if it selects an anchor node. -
    3. -
- The candidate examination algorithm for a candidate - DOM node N in a scrolling box S is as follows: -
    -
  1. - If N is an excluded subtree, or if N is fully - clipped in S, then do nothing (N and its descendants are skipped). -
    2. -
  2. - If N is fully visible in S, select N as the anchor node. -
    3. -
  3. - If N is partially visible: -
      -
    1. - For each DOM child C of N, perform the candidate - examination algorithm for C in S, and terminate if it selects an anchor node. -
      2. -
    2. - For each absolute-positioned element A whose containing block is N, but whose - DOM parent is not N, perform the candidate - examination algorithm for A in S, and terminate if it selects an anchor node. -
      3. -
    3. - Select N as the anchor node. (If this step is reached, no suitable anchor node was - found among N's descendants.) -
      4. -
    -
    - Deeper nodes are preferred to minimize the possibility of content changing - inside the anchor node but outside the viewport, which would cause visible - content to shift without triggering any scroll anchoring adjustment. -
    -
    4. -
-

-

- Conceptually, a new anchor node is computed for every scrolling box whenever the scroll position of - any scrolling box changes. (As a performance optimization, the implementation may wait until the - anchor node is needed before computing it.) -

-

- A DOM node N is an excluded subtree if it is an element and any of the following conditions - holds: -

-

-

- A DOM node N is fully visible in a scrolling box S if its - scroll anchoring bounding rect is entirely within the - optimal viewing region - of S. -

-

- A DOM node N is fully clipped in a scrolling box S if its - scroll anchoring bounding rect is entirely outside the - optimal viewing region - of S. -

-

- A DOM node N is partially visible in a scrolling box S if it - is neither fully visible in S nor fully clipped in S. -

-

- The scroll anchoring bounding rect of a DOM node N - is its scrollable overflow rectangle - if N is a block box, or the bounding rect of its - line boxes if N is a text node. -

-
-
-

Scroll Adjustment

-

- If an anchor node was selected, then when the anchor node moves, - the browser computes the previous offset y0, and the current offset y1, - of the block start edge of the anchor node's scroll anchoring bounding rect, - relative to the block start edge of the scrolling content in the - block - flow direction of the scroller. -

-

- It then queues an adjustment to the scroll position - of y1 - y0, in the block flow direction, to be performed at the end of the - suppression window. -

-

- The scroll adjustment is a type of - scrolling as defined by - CSSOM View Module, and generates - scroll events - in the manner described there. -

-

Suppression Window

-

- Every movement of an anchor node occurs within a window of time called the - suppression window, defined as follows: -

    -
  • The suppression window begins at the start of the current iteration of the - HTML Processing Model event loop, or at the end of the most recently completed suppression window, - whichever is more recent.
    • -
  • The suppression window ends at the end of the current iteration of the - HTML Processing Model event loop, - or immediately before the next operation whose result or side effects - would differ as a result of a change in the scroll position (for example, - an invocation of - getBoundingClientRect), whichever comes sooner. -
    • -
-
- The suppression window boundaries should be incorporated into the HTML standard once the - scroll anchoring API is stabilized. -
- More than one anchor node movement may occur within the same suppression window. -

-

- At the end of a suppression window, the user agent performs all scroll - adjustments that were queued during the window and not suppressed by any - suppression trigger during the window. -

-

Suppression Triggers

-

- A suppression trigger is an operation that - suppresses the scroll anchoring adjustment for an anchor node movement, if it - occurs within the suppression window for that movement. These triggers are: -

-

-
- Suppression triggers exist for compatibility with existing web content that has negative - interactions with scroll anchoring due to shifting content in scroll event handlers. -
-
-
-
-

Exclusion API

-

- Scroll anchoring aims to be the default mode of behavior when launched, so that - users benefit from it even on legacy content. A CSS property - overflow-anchor can disable - scroll anchoring in part or all of a webpage (opt out), or exclude portions - of the DOM from the anchor node selection algorithm. - This property supports the following values when applied to an element E: -

-
    -
  • - overflow-anchor: auto (the default value) declares - that the DOM subtree rooted at E is eligible to participate in the - anchor - node selection algorithm for any scrolling box created by E or an ancestor of E. -
    • -
  • - overflow-anchor: none - declares that the DOM subtree rooted at E is not eligible to - participate in the anchor node selection algorithm - for any scrolling box created by E or an ancestor of E. -
    • -
-
- The overflow-anchor property was also proposed (with different values) for - CSS Sticky Scrollbars, - which has now been - superseded. -
-

- The overflow-anchor property is not inherited. -

-
- -

References

-

Normative References

-
-
[CSSOM-VIEW-1] -
Simon Pieters. CSSOM View Module. 17 March 2016. WD. URL: https://drafts.csswg.org/cssom-view/ -
- - +

The Scroll Anchoring spec has graduated from the WICG, + and is now