CSS Scroll Anchoring Module Level 1 （日本語訳）

◎要約

`~scrollされる~box$の可視~領域より上にある~DOM要素が変化すると、利用者が内容を消費している途中で~pageが動く結果になり得る。 ◎ 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.

この仕様は、 ~anchor~nodeの位置を追跡し続け，それに則って~scroll~offsetを調整することにより、この目障りな利用者~体験を軽減する仕組みを提案する。 ◎ 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.

この仕様は、この挙動を~opt-outするための~web開発者~向け~APIも提案する。 ◎ This spec also proposes an API for web developers to opt-out of this behavior.

~CSSisaLANG

【この訳に特有な表記規約】

◎表記記号

1. 序論

今日の~web利用者たちは、表示域の外側で生じる変化に因り内容が周りへ動くことにより，気を散らされることが多い。例えば、 ~scriptが広告入り~iframeを挿入するときや，低速な~networkの下で~sizeが与えられていない画像を読込むときなど。 ◎ 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.

そのような変化が生じたときの~browserの既定の挙動は、歴史的に，絶対的な~scroll位置を保全することであった。 ~web~pageは、内容がズラされるのを避けるため，後から読込まれるもの用に ~page上の空間を予約することもできるが、実施においてこれを一貫して行なっている~web~siteは，ごく限られている。 ◎ 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~anchor法は、表示域の外側における変化によるずれに対し，~scroll位置を調整して補償することにより、内容が~~不意にズラされるの最小限にすることを目指す。 ◎ Scroll anchoring aims to minimize surprising content shifts. It does this by adjusting the scroll position to compensate for the changes outside the viewport.

~scroll~anchor法について概観する正式でない説明もある。 ◎ The explainer document gives an informal overview of scroll anchoring.

1.1. 値~定義

【この節の内容は ~CSS日本語訳共通~page に移譲。】

2. ~~説明

~scroll~anchor法は、 ~layoutが変化しても，利用者からの文書~viewは安定的に保とうと試みる。それは、 `~anchor~node@ — 【現在~利用者が見ている，】ある~DOM~node — を選定した上で，［その~nodeの動きを利用して，~scroll位置の調整を決定する］ことにより働く。 ◎ Scroll anchoring attempts to keep the user’s view of the document stable across layout changes. It works by selecting a DOM node (the anchor node) whose movement is used to determine adjustments to the scroll position.

しかしながら，当の`~scroll容器$が現在ある要素に`留められ$ている `CSS-SCROLL-SNAP-1$r 場合、 ~scroll~anchor法は，`留直し$により許容される調整に制限される。 ◎ However, if the scroll container is currently snapped to an element, (see [CSS-SCROLL-SNAP-1]) scroll anchoring is limited to adjustments that would be allowed by re-snapping.

2.1. ~anchor~nodeの選定

各`~scrollされる~box$は、 ~anchor~nodeとして［次に該当するもののうち，~DOM内でなるべく深いそれ］を選定しようと目指す ⇒ `最適な~view用~領域$の`塊-始端$辺に近いか，重要な~DOM~nodeとして優先されるべきもの ◎ Each scrolling box aims to select an anchor node that is deep in the DOM and either should be prioritized as an important DOM node or is close to the block start edge of its optimal viewing region.

注記： ~UAが `scroll-padding$p ~propを~supportしない場合、 `最適な~view用~領域$は，`~scrollされる~box$の`内容~区画$と等価になる。 ◎ Note: 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.

`可分な行内$を除くどの`~box$も~anchor~nodeになり得る。 ~anchor~nodeは、常に`~scrollされる~box$の`子孫$になる。事例によっては、 ~scrollされる~boxに対する~anchor~nodeは選定されないこともある【この訳では、記号 ε で表現する】。 ◎ An anchor node can be any box except one for a non-atomic inline. The anchor node is always a descendant of the scrolling box. In some cases, a scrolling box may not select any anchor node.

所与の ( 要素 %C, `~scrollされる~box$ %S ) に対し， ~AND↓ が満たされるならば — %C は %S 用の~scroll~anchorになり得る — `実現可能な候補@ （ `viable candidate^en ）であるとされる： ◎ An element C is a viable candidate for becoming a scroll anchor for a scrolling box S if it meets all of the following criteria:

%C は`可分な行内$でない ◎ C is an element that is not a non-atomic inline.
%C は %S 内で［ `部分的に可視$／`全部的に可視$ ］である ◎ C is partially visible or fully visible in S
%C は %S の子孫である ◎ C is a descendant of S
次を満たす要素は無い ⇒ ［ %C またはその先祖である］~AND［ %S またはその子孫である］~AND［ある`除外される下位tree$内には無い【`除外される下位tree$でも, その子孫でもない】］ ◎ C is not in an excluded subtree ◎ None of the ancestors of C up to S are in an excluded subtree

次の (A) に挙げる各~要素に対し，その次の (B) で決定される要素は、 ~anchor選定~用の `~anchor優先~候補@ （ `anchor priority candidate^en ）と見なされる： ◎ Some elements are considered to be anchor priority candidates for anchor selection:

(A)：
- 文書にて`~focusされている区画$の`~DOM~anchor$のうち、 ~text編集-可能であるもの（ `編集-可能$／ `編集中の~host$／ `変異-可能$な `textarea$e ／ `変異-可能$な `input$e のうち，その `type^a は~text手入力を許容するもの）。 ◎ The DOM anchor of the focused area of the document, if such an anchor is text editable (editable, editing host, mutable textarea, or mutable input with a type that allows text entry).
- ~UAによる~find-in-page~algoにより，現在`作動中な合致-$を包含している要素 — 複数~個ある場合、それらのうち最初の要素。
  
  【 “包含している” の意味が曖昧（一部でも包含する~nodeも該当しそうだが、それに沿うなら，文書の根~要素まで該当してしまいそうだ）。ありそうな解釈として、合致している部分を表現する`範囲~obj$の`始端~node$が考えられる。】
  ◎ An element containing the current active match of the find-in-page user-agent algorithm. If the match spans multiple elements, then consider only the first such element.
(B)：［該当する要素, またはその先祖］であって［ `可分な行内$でない【~boxを生成する】もの］のうち，要素に最も近いもの ◎ Note that if the priority candidate is a non-atomic inline element, then instead consider its nearest ancestor element that is not a non-atomic inline element as the priority candidate.

`~anchor~node選定~algo@ は、所与の`~scrollされる~box$ %S に対し，次を走らせた結果を~anchor~nodeとして返す： ◎ The anchor node selection algorithm for a scrolling box S is as follows:

%~node ~LET %S に結付けられた要素または文書
~IF［ %~node は要素である］~AND［ %~node の `overflow-anchor$p ~propの算出d値 ~EQ `none$v ］ ⇒ ~RET ε ◎ 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.
`~anchor優先~候補$たちを成す ~EACH( %候補 ) に対し，指定された順序【~tree順序？】で ⇒ ~IF［ %候補は %S 内の`実現可能な候補$である］ ⇒ ~RET %候補 ◎ Otherwise, for each priority candidate PC in order specified, check if PC is a viable candidate in S. If so, select it as an anchor node and terminate.
%~node の~EACH( 子~node %N ) に対し：
1. %結果 ~LET `候補~審査~algo$( %N, %S ) を遂行した結果
2. ~IF［ %結果 ~NEQ ε ］ ⇒ ~RET %結果
◎ 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.
~RET ε

`候補~審査~algo@ は、所与の ( 候補~node %N, `~scrollされる~box$ %S ) に対し，次を走らす： ◎ The candidate examination algorithm for a candidate DOM node N in a scrolling box S is as follows:

~IF［ %N は %S 内の`除外される下位tree$である］~OR［ %N は %S 内で`全部的に切取られて$いる］ ⇒ ~RET ε （ %N とその子孫は飛ばされる。） ◎ If N is an excluded subtree, or if N is fully clipped in S, then do nothing (N and its descendants are skipped).
~IF［ %N は %S 内で`全部的に可視$である］ ⇒ ~RET %N ◎ If N is fully visible in S, select N as the anchor node.
~Assert： %N は %S 内で`部分的に可視$である ◎ If N is partially visible:
%N の~EACH( 子~node %C ) に対し
1. %結果 ~LET `候補~審査~algo$( %C, %S ) を遂行した結果
2. ~IF［ %結果 ~NEQ ε ］ ⇒ ~RET %結果
◎ For each DOM child C of N, perform the candidate examination algorithm for C in S, and terminate if it selects an anchor node.
%N を`包含塊$とする ~EACH( 要素 %A ) に対し：
1. ~IF［ %A の親~node ~EQ %N ］~OR［ %A は`絶対的に位置され$ていない］ ⇒ ~CONTINUE
2. %結果 ~LET `候補~審査~algo$( %A, %S ) を遂行した結果
3. ~IF［ %結果 ~NEQ ε ］ ⇒ ~RET %結果
◎ For each absolutely-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.
~RET %N （この段に達したなら、 %N の子孫には，相応しい~anchor~nodeは見出せなかったことになる。） ◎ Select N as the anchor node. (If this step is reached, no suitable anchor node was found among N’s descendants.)

注記：変化する内容が［ ~anchor~nodeの内側にありつつ，表示域の外側にある］可能性を最小限にするため、なるべく深い~nodeが選好される。そのような変化は、 ~scroll~anchor法の調整を誘発することなく，可視な内容をズラすので。 ◎ Note: 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.

概念的には、ある`~scrollされる~box$の~scroll位置が変化する度に，各~scrollされる~boxごとに新たな~anchor~nodeが算出される。（処理能の最適化として，実装は、当の~anchor~nodeが必要になるまで，その算出-を待機してヨイ） ◎ 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.)

要素~node %要素は、 ~OR↓ を満たすならば，`~scrollされる~box$ %S 内の `除外される下位tree@ （ `excluded subtree^en ）とされる： ◎ A DOM node N is an excluded subtree if it is an element and any of the following conditions holds:

%要素の `display$p ~propの算出d値 ~EQ `none^v ◎ N’s computed value of the display property is none.
%要素の `position$p ~propの算出d値 ~EQ `fixed^v ◎ N’s computed value of the position property is fixed.
［ %要素の `position$p ~propの算出d値 ~EQ `absolute^v ］~AND［ %要素の`包含塊$は %S の先祖である］ ◎ N’s computed value of the position property is absolute and N’s containing block is an ancestor of the scrolling box.
%要素の `overflow-anchor$p ~propの算出d値 ~EQ `none$v ◎ N’s computed value of the overflow-anchor property is none.

所与の ~node %N, `~scrollされる~box$ %S に対し： ◎ ↓

%N は %S 内で `全部的に可視@ であるとは、次を意味する ⇒ %N の`~scroll~anchor用の限界~矩形$全体が %S の`最適な~view用~領域$の内側にある ◎ A DOM node N is fully visible in a scrolling box S if N’s scroll anchoring bounding rect is entirely within the optimal viewing region of S.
%N は %S 内で `全部的に切取られて@ いるとは、次を意味する ⇒ %N の`~scroll~anchor用の限界~矩形$全体が %S の`最適な~view用~領域$の外側にある ◎ A DOM node N is fully clipped in a scrolling box S if N’s scroll anchoring bounding rect is entirely outside the optimal viewing region of S.
%N は %S 内で `部分的に可視@ であるとは、次を意味する ⇒ ［ %N は %S 内で`全部的に可視$でない］~AND［ %N は %S 内で`全部的に切取られて$いない］ ◎ A DOM node N is partially visible in a scrolling box S if N is neither fully visible in S nor fully clipped in S.

~node %N の `~scroll~anchor用の限界~矩形@ は、 %N の`~scroll可能な~overflow矩形$とする。 ◎ The scroll anchoring bounding rect of a DOM node N is N’s scrollable overflow rectangle.

2.2. ~scroll調整

~anchor~node %N （~NEQ ε ）を選定した~browserは、 %N が動いたときには，次を行う：

［ ~scrollする内容の`塊-始端$辺］から［ %N の`~scroll~anchor用の限界~矩形$の`塊-始端$辺］までの~offset — 動く前の~offset %y0, 動いた後の~offset %y1 — を算出する。
［ ~scroll位置を塊~flow方向に %y1 − %y0 だけ調整する手続き］を，`抑止~窓$の終端で遂行されるように~queueする。

◎ 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.

この~scroll調整は、 ~scroll法 `CSSOM-VIEW$r の一部を成し，そこに記述される方式で `scroll$et ~eventを生成する。 ◎ The scroll adjustment is a type of [[cssom-view-1#scrolling-events#scrolling]] as defined by [CSSOM-VIEW], and generates scroll events in the manner described there.

2.2.1. 抑止~窓

~anchor~nodeの各~動きは `抑止~窓@ （ `suppression window^en ）と呼ばれる，ある時区間の中で生じる。抑止~窓の始端と終端は、次に従って定義される： ◎ Every movement of an anchor node occurs within a window of time called the suppression window, defined as follows:

始端は、次に挙げる時点のうち，最も近過去の時点：
- `~event~loop処理~model$の現在の反復の始端
- 完了した前回の抑止~窓の終端
◎ 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.
終端は、次に挙げる時点のうち，最も近未来の時点：
- `~event~loop処理~model$の現在の反復の終端
- 次に~scroll位置を変化させるような演算の直前（副作用による変化も含む — 例えば， `getBoundingClientRect()$m の呼び出しなど）
◎ 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.

注記：抑止~窓の境界は、 ~scroll~anchor法~APIが安定化されたなら，~HTML標準に組入れられるべきである。 ◎ Note: The suppression window boundaries should be incorporated into the HTML standard once the scroll anchoring API is stabilized.

~anchor~nodeの動きは、同じ抑止~窓の中で複数~回~生じ得る。 ◎ More than one anchor node movement may occur within the same suppression window.

~UAは、［抑止~窓の間に~queueされ, `抑止~誘因$により抑止されなかった］すべての~scroll調整を，この窓の終端にて遂行する。 ◎ 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.

2.2.2. 抑止~誘因

`抑止~誘因@ （ `suppression trigger^en ）と称される一部の演算に対しては、それにより［当の演算と同じ抑止~窓の中で生じた~anchor~nodeの動き］に対する~scroll~anchor法の調整は，抑止される。次のものが、 `抑止~誘因$とされる： ◎ 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:

~anchor~nodeから~scroll可能な要素までの経路にあるいずれかの要素（または文書）上での，次に挙げるいずれかの~propにおける算出d値の変化： ◎ Any change to the computed value of any of the following properties, on any element in the path from the anchor node to the scrollable element (or document), inclusive of both:
- 各種`~inset~prop$ ◎ top, left, right, or bottom
- `margin$p ~propとその下位prop ◎ margin or its longhands
- `padding$p ~propとその下位prop ◎ padding or its longhands
- `width$p, `height$p, `min-width$p, `max-width$p, `min-height$p, `max-height$p ◎ width, height, min-width, max-width, min-height, or max-height
- `position$p
- `transform$p
~scroll可能な要素（または文書）の中のいずれかの要素~上での［その要素が`絶対的に位置され$るかどうかどうかを切り替える］ような， `position$p ~propの算出d値の変化。この誘因は、改変された要素が~anchor~nodeから~scroll可能な要素までの経路にあるかどうかに関わらず，適用されることに注意。 ◎ Any change to the computed value of the position property on any element within the scrollable element (or document), such that the element becomes or stops being absolutely positioned. Note that this trigger applies regardless of whether the modified element is on the path from the anchor node to the scrollable element.
~scroll可能な要素の~scroll~offsetは 0 である。 ◎ The scroll offset of the scrollable element being zero.

注記：抑止~誘因が存在するのは、互換性を得る — 既存の~web内容が~scroll~event~handlerで内容をズラしていることに因り，~scroll~anchor法と負な相互作用が生じるのを防ぐ — ためである。 ◎ Note: Suppression triggers exist for compatibility with existing web content that has negative interactions with scroll anchoring due to shifting content in scroll event handlers.

3. 除外~API

~scroll~anchor法は、旧来の内容においても利用者が便益を得られるよう，起動時から既定の挙動になることを目指す。 ~web~pageは、 `overflow-anchor$p ~propにより、 ~scroll~anchor法の一部または全部を任意選択で不能化したり，~DOM内のある部位を`~anchor~node選定~algo$から除外できる。 ◎ Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. 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.

◎名 `overflow-anchor@p ◎値 `auto$v | `none$v ◎初 `auto$v ◎適すべての要素 ◎継されない ◎百受容しない ◎算指定された~keyword ◎順文法に従う ◎ア離散的 ◎表終

各種値は、次に従って定義される： ◎ Values are defined as follows:

`auto@v: 要素またはその先祖により作成されるどの`~scrollされる~box$に対しても、［要素は，`~anchor~node選定~algo$に関与するに適格である］ものと宣言する。 ◎ Declares that the element is potentially eligible to participate in the anchor node selection algorithm for any scrolling box created by the element or an ancestor.
`none@v: 要素またはその先祖により作成されるどの`~scrollされる~box$に対しても、［要素とその子孫（のうち，~scrollしている別の要素の内側に入子にされていないもの）は，`~anchor~node選定~algo$に関与するに適格でない］ものと宣言する。 ◎ Declares that the element and its descendants (that aren’t nested inside of another scrolling element) are not eligible to participate in the anchor node selection algorithm for any scrolling box created by the element or an ancestor.

注記： `overflow-anchor$p に `none^v を指定した要素においては、子孫の~scroll~anchor法を “オンに戻す” よう転じることはアリでない。しかしながら，子孫`~scroll容器$では、（自前の`~scrollされる~box$用に）自動的に “オンに戻す” よう転じる — それら子孫の `overflow-anchor$p も明示的に `none^v に設定しない限り。 ◎ Note: It is not possible to turn scroll anchoring "back on" for descendants of a overflow-anchor: none element. However, descendant scroll containers automatically "turn it back on" (for their own scrolling box) unless they explicitly have overflow-anchor: none set on them as well.

注記： `overflow-anchor^p ~propは CSS Sticky Scrollbars 用にも提案されたが（異なる値をとるものとして）、今や他に取って代わられた。 ◎ Note: The overflow-anchor property was also proposed (with different values) for CSS Sticky Scrollbars, which has now been superseded.

~privacyと~securityの考慮点

この仕様は、 ~scroll位置の算出-法を調整するだけであり，新たな［ ~privacy／~security ］の考慮点はない。 ◎ This specification, as it only adjusts how we compute scroll positions, introduces no new privacy or security considerations.

変更点

2020年 2月 11日作業草案からの変更点 ◎ Changes Since the Feb 11 2020 Working Draft: ［ `実現可能な候補$, `~anchor優先~候補$の］の定義を追加した。 ◎ Added definitions of viable candidate and priority candidate.; ~scroll~anchor法と`~scroll留ng$との相互作用を明確化した。 ◎ Clarified interaction between scroll anchoring and scroll snapping.