【この訳に固有の表記規約】
この訳の,~algoや定義の記述に利用されている各種記号( ~LET, ~IF, ~RET 等々)の意味や定義の詳細は,~SYMBOL_DEF_REFを~~参照されたし。
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頁は、内容がズラされるのを避けるため,後から読込まれるもの用に 頁~上の空間を予約することもできるが、実施において一貫してこれを行なっている~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.
2. ~~説明
~scroll~anchor法は、 `~anchor~node@ と呼ばれる,`現在~利用者に見えている^tnode ある~DOM~nodeを選定した上で,その~nodeの動きに基づいて~scroll位置の調整を決定することにより働く。 ◎ Scroll anchoring works by selecting a DOM node (the anchor node) whose movement is used to determine adjustments to the scroll position.
2.1. ~anchor~nodeの選定
各`~scroll用~box$は、`最適な~view用~領域$の`塊-始端$辺に近い, かつ ~DOM内でなるべく深い~anchor~nodeを選定しようと目指す。 ◎ 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.
注記: ~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.
~anchor~nodeは、[ 匿名でない`塊~box$, または`~text~node$ ]であって,常に`~scroll用~box$の`子孫$になる。 事例によっては、~scroll用~boxに対する~anchor~nodeは選定されないこともある 【この訳では、記号 ε で表現する】 。 ◎ 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.
`~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の算出値 ~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.
-
%~node の~EACH( 子~node %N ) に対し:
- %結果 ~LET `候補~検分~algo$( %N, %S ) を遂行した結果
- ~IF[ %結果 ~NEQ ε ] ⇒ ~RET %結果
- ~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 内の`除外~部分木$である ]~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 ) に対し
- %結果 ~LET `候補~検分~algo$( %C, %S ) を遂行した結果
- ~IF[ %結果 ~NEQ ε ] ⇒ ~RET %結果
-
%N を`包含塊$とする ~EACH( 要素 %A ) に対し:
- ~IF[ %A の親~node ~EQ %N ]~OR[ %A は絶対位置されていない ] ⇒ ~CONTINUE
- %結果 ~LET `候補~検分~algo$( %A, %S ) を遂行した結果
- ~IF[ %結果 ~NEQ ε ] ⇒ ~RET %結果
- ~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が必要になるまで,その算出-を待機して~MAY) ◎ 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 %要素 は、次のいずれかを満たすならば ~scroll用~box %S 内の `除外~部分木@ とされる: ◎ A DOM node N is an excluded subtree if it is an element and any of the following conditions holds:
- %要素 の `display$p ~propの算出値 ~EQ `none^v ◎ N’s computed value of the display property is none.
- %要素 の `position$p ~propの 算出値 ~EQ `fixed^v ◎ N’s computed value of the position property is fixed.
- [ %要素 の `position$p ~propの算出値 ~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の算出値 ~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 に応じて,[ `塊~box$であるならば %N の`~scroll可能な~overflow矩形$ / ~text~nodeであるならば %N の`行l~box$ ]とする。 ◎ The scroll anchoring bounding rect of a DOM node N is N’s scrollable overflow rectangle if N is a block box, or the bounding rect of its line boxes if N is a text node.
2.2. ~scroll調整
~anchor~node %N (~NEQ ε )を選定した~browserは、 %N が動いたときには,次を行う:
- [ ~scrollする内容の`塊-始端$辺 ]から[ %N の`~scroll~anchor用の限界矩形$の`塊-始端$辺 ]までの~offset — 動く前の~offset %y0, 動いた後の~offset %y1 — を算出する。
- [ ~scroll位置を塊~flow方向に %y1 − %y0 だけ調整する手続き ]を,`抑止~窓$の終端で遂行されるように~queueする。
この~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 )と呼ばれる,ある時区間の中で生じる。 抑止~窓の始端と終端は、次に従って定義される: ◎ Every movement of an anchor node occurs within a window of time called the suppression window, defined as follows:
-
始端は、次に挙げる時点のうち,最も近過去の時点:
- `~event-loop処理~model$の現在の反復の始端
- 完了した前回の抑止~窓の終端
-
終端は、次に挙げる時点のうち,最も近未来の時点:
- `~event-loop処理~model$の現在の反復の終端
- 次に~scroll位置を変化させるような演算の直前(副作用による変化も含む — 例えば, `getBoundingClientRect()$m の呼び出しなど)
注記: 抑止~窓の境界は、~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 )と称される一部の演算に対しては、それにより[ 当の演算と同じ抑止~窓の中で生じた~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における算出値の変化: ◎ 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:
- 各種`~box~offset~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
- `position$p
- `transform$p
- ~scroll可能な要素(または文書)の中の いずれかの要素~上での[ その要素が絶対位置されるかどうかどうかを切り替える ]ような, `position$p ~propの算出値の変化。 この誘因は、改変された要素が~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.
注記: 抑止~誘因が存在するのは、互換性を得る — 既存の~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頁は、 `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 ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 離散的 ◎表終各種 値は、次に従って定義される: ◎ 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.