CSS Overscroll Behavior Module Level 1

1. 序論

内容~作者は、［ 一部の`~scroll容器$には、 `連鎖的scroll$は生じない ］よう求めることもある。 `~scroll容器^には、［ `包含塊~連鎖$の一部を成す一方で，文書~内で論理的に異なる目的を~serveするもの ］もあり，［ `~scroll連鎖$を遡って~scrollし続けない ］よう求まれることもある。 これを達成するため、 内容~作者は，［ `passive$m を設定しないまま~event~listenerを~installした上で、 `連鎖的scroll$が生じる~riskがあるときは， `preventDefault()$m を利用する ］ことになる。 これは、 次の理由で不利益になる： ◎ A content author does not necessarily want scroll chaining to occur for all scroll containers. Some scroll containers may be part of a containing block chain but may serve a different logical purpose in the document and may want to prevent scrolling from continuing up the scroll chain. To achieve this, a content author will install event listeners without the passive flag set and will use preventDefault() when there is a risk that scroll chaining will occur. This is detrimental for the following reasons:

• ~UAは、 ~scrollするための新たな入力~methodを，将来に導入し得る — それは、 内容~作者の~event~listenerが~supportしないかもしれない。 ◎ The user agent may in the future introduce new input methods for scrolling that are not supported by the content author’s event listeners.
• 受動的（ `passive^en ）でない~event~listenerは、 ~scrollをカクつかせる — ~UAは、 `preventDefault()$m が~callされたかどうか決定するため， ~event~listenerの結果を待機する必要があるので。 【これが、 `passive$m が導入された理由である。】 ◎ 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 preventDefault() was called causing increased scroll latency.

• `preventDefault()$m は、 当の~event用の`既定~動作$の一部 — `連鎖的scroll$など — に限り取消すことを，内容~作者に許容しない：

  • `~scroll境界$の近辺で~scrollされたときの既定~動作には、 `境界上の既定~動作$に先立って，`~scroll容器$を成す辺まで~scrollするものもある。
  • `既定~動作$は、 作者が取消したいと求めない追加的な挙動 — ~overscroll~affordance†など — を供することもある。 【† ~scroll可能な~~範囲を超えて~scrollしようとしたことを利用者に示唆するような何か】

  `preventDefault()^m は、 これらも取消すことになる。

  ◎ When scrolling is performed near the edge of the scroll boundary, the default action may cause both scrolling to the edge of the scroll container and a boundary default action. Calling preventDefault() will not only cancel the boundary default action but also the scroll to the edge of the scrollport. ◎ The default action for the event may also provide additional behavior that the author does not want to cancel such as an overscroll affordance. preventDefault() doesn’t allow the content author to cancel only some of the default actions such as scroll chaining.

堅牢かつ高処理能かつ前方-互換な仕方で`連鎖的scroll$と~overscrollを制御することは、 内容~作者にとってアリでない。 `overscroll-behavior$p ~propは、 この欠点を修正する。 ◎ Thus, it is not possible for a content author to control scroll chaining and overscroll in a robust, performant and forward compatible way. The overscroll-behavior property fixes this shortcoming.

2. 動機にある例

#sidebar {
  overscroll-behavior: contain;
}

html {
  /* 
【`~scroll容器$における】~pull-to-refreshのみ不能化して，~swipe~navi【横方向への~overscroll】は許容する。
◎
only disable pull-to-refresh but allow swipe navigations
 */
  overscroll-behavior-y: contain;
}

#infinite_scroller {
  overscroll-behavior-y: none;
}

3. 連鎖的scrollと境界上の既定~動作

~OSは、 ~scroll用の規則 — `連鎖的scroll$, ~overscroll~affordanceなど — を備える。 この仕様は、［ 連鎖的scroll／~overscroll~affordance ］を［ 実装すること, どう実装するか ］を義務付けるものではない。 この仕様は、［ これらが実装されている場合に不能化することを，内容~作者に許容する ］のみである。 ◎ 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.

`連鎖的scroll@ は、 `~scroll容器$から先祖`~scroll容器^へ，`~scroll連鎖$を遡って~scrollingが伝播することを指す。 連鎖的scrollは、概して，［ ~event~targetから開始して，`包含塊~連鎖$を先祖へ遡る ］ように遂行される。 この連鎖~内の ある`~scroll容器^が受取った［ ~scroll~event／~scroll~gesture ］は、 当の容器~上で動作し得ることに加え， 連鎖を遡って次の容器へ渡され得る。 連鎖的scrollは、 概して，`~scrollport$の境界に達したときに生じる。 ◎ Scroll chaining 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.

`~scroll連鎖@ は、 ~scrollingが各`~scroll容器$を伝播するときの順序を成す。 `表示域$は、 文書の `scrollingElement$m として`連鎖的scroll$に関与する — ［ ~scroll連鎖における配置，それに適用される連鎖的scrollの規則を固守すること ］の両者に関して。 ◎ A scroll chain is the order in which scrolling is propagated from one scroll container to another. The viewport participates in scroll chaining as the document’s scrollingElement, both regarding placement in the scroll chain as well as adhering to the chaining rules applied to it.

`~scroll境界@ は、 `~scroll容器$の~scroll位置が`~scrollport$を成す辺に達していることを指す。 ~scrollされ得ない~scroll容器 — 当の~scroll方向にて，`~overflow$していないなど — は、 常に~scroll境界にあるものと見なされる。 ◎ Scroll boundary 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.

`境界上の既定~動作@ とは、 ~UAが定義する`既定~動作$のうち，`~scrollport$の辺に向けて~scrollするときに遂行されるものを指す。 `境界上の既定~動作$は、［ `局所的@ であるもの, `局所的でない@† もの ］に大別される。 前者は、 `~scroll容器$上で~page【すなわち，容器の外】とヤリトリすることなく遂行されるものを指す — 例：~overscroll~UI~affordanceを表示するなど。 後者は、 ~pageとヤリトリするものを指す — 例：`連鎖的scroll$や~navi動作など。 【†この訳では、この用語は利用せず，一律に “`局所的$`でない^em” と記す。】 ◎ Boundary default action refers to the user-agent-defined default action performed when scrolling against the edge of the scrollport. A local boundary default action 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 non-local boundary default action interacts with the page, for example scroll chaining or a navigation action.

4. ~overscroll挙動~prop

`~overscrollの挙動@ は、［ `~scroll容器$の`~scrollport$が自身の~scroll~boxの境界に達したとき ］の，`~scroll容器$に許可される`境界上の既定~動作$を制御する。 ◎ The overscroll behavior controls the permitted boundary default action for a scroll container element when its scrollport reaches the boundary of its scroll box.

`overscroll-behavior$p ~propは、 `~scroll容器$用に`~overscrollの挙動$を指定する。 それは、［ `~scroll容器^は［ `連鎖的scroll$／~overscroll~affordance ］を防止するモノトスル ］よう指定することを，内容~作者に許容する。 ◎ 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.

`~scroll容器$でない要素は、 この~propを受容しつつ，その値を無視するモノトスル。 この~propは、 ~UAが~supportする すべての~scrolling~methodに適用するモノトスル。 ◎ 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.

注記： この~propは、［ `連鎖的scroll$, ~overscroll ］の両者とも防止することに関して，少なくとも `preventDefault()$m 以上の保証は供するベキである。 さもなければ、 内容~作者は，代わりに `preventDefault()^m を利用することになろう。 ◎ 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.

`overscroll-behavior$p ~propは、［ `overscroll-behavior-x$p, `overscroll-behavior-y$p ］の指定d値を，この順に設定する略式~propである。 値が 1 個だけ指定された場合、 それが 2 個目の値も与える。 ◎ 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:

`contain@v

この値は、［ 要素~上では、 `局所的$でない`境界上の既定~動作$ — `連鎖的scroll$や~naviなど — を遂行しないモノトスル ］ことを指示する。 ~UAは、 `~scroll連鎖$を先祖へ遡る`連鎖的scroll$を遂行しないモノトスル — 当の要素, その子孫のどこから~scrollされたかに関わらず。 この値は、［ `局所的$である`境界上の既定~動作$ — ~overscroll~affordanceを示すなど — がどう挙動するベキか ］は改変しないモノトスル。 ◎ This value indicates that the element must not perform non-local boundary default actions such as scroll chaining or navigation. The user agent must not perform scroll chaining to any ancestors along the scroll chain regardless of whether the scroll originated at this element or one of its descendants. This value must not modify the behavior of how local boundary default actions should behave, such as showing any overscroll affordances.

`none@v

この値は、 `contain$v と同じ挙動を含意する。 加えて、 要素~上では，`局所的$である`境界上の既定~動作$ — ~overscroll~affordanceを示すなど — も遂行しないモノトスル。 ◎ This value implies the same behavior as contain and in addition this element must also not perform local boundary default actions such as showing any overscroll affordances.

`auto@v

この値は、［［ `連鎖的scroll$／~overscroll／~navi~gesture ］を尊重して，通例の`境界上の既定~動作$を遂行するベキである ］ことを~UAに指示する。 ◎ This value indicates that the user agent should perform the usual boundary default action with respect to scroll chaining, overscroll and navigation gestures.

注記： `境界上の既定~動作$【！連鎖的scroll／~overscroll~affordance】を実装しない~UA【！＊？for a compliant implementation】には、 これらの値による副作用は無い。 ◎ 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.

注記： `境界上の既定~動作$は、 ~program的に~scrollされたときには，誘発されない。 ◎ Note: Programmatic scrolling is clamped and can not trigger any boundary default actions.

4.1. ~overscrollと有位置な要素

この仕様は、［ ~UAが “~overscroll” や類似な動作を備える場合に、 それらのうち何が，`局所的$な`境界上の既定~動作$として生じ得るか ］は，一般に規定しない。 ◎ This specification does not generally dictate what, if any, "overscroll" or similar actions might occur as a local boundary default action.

しかしながら，~UAが “~overscroll” の挙動を`利用する^em場合 （すなわち、［ ~scroll可能な要素が，自身の~scroll可能な区画の “終端を少し過ぎて” ~scrollされる ］ことを許容する場合 — 通例的に、 ~scrollや~dragが完了した後に “~rubber-banding” 効果を伴って）、 以下が適用される： ◎ However, if a user agent does 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:

要素が［ `固定的に位置され$ていて，`初期~包含塊$に相対的に位置されている／ `張付きに位置され$ていて，`表示域$に張付いている ］場合、 `根~scroller^【~page全体を~scrollするための何か（~UIなど）】が “~overscroll” を経たとしても，要素は［ 文書の他の内容と伴に~overscroll`しない^em ］モノトスル — 代わりに、 当の~scrollerは，［ 自身の［ 最小／最大 ］~scroll位置 — ~overscrollが完遂したとき返ることになる位置 — にあった ］かのように位置し続けるモノトスル。 ◎ 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 must not 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.

これは，そのような【！fixed/sticky】要素の［ ~page上の他の要素から相対的な位置 ］をズラし得るが、 純粋に視覚的な効果として扱うモノトスル — `getBoundingClientRect()$m などの~APIに対し，実際の［ ~layout／位置 ］変化として報告しないモノトスル。 ◎ 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 getBoundingClientRect().

注記： この挙動があるのは、［ `固定的に位置され$た／ `張付きに位置され$，表示域に張付いている ］要素は， “表示域” に相対的に位置されるからである — 表示域は、 概念的に，~page階層において根~scrollerの上層にある （実質的に，それが根~scrollerを保持している`~scroll容器$である）。 したがって，根~scrollerが~overscrollされても， そのような要素に対する効果は生じないベキである — ~scrollerの子が［ `絶対的に位置され$ていて，その`絶対~位置決め包含塊$が~scrollerの上層にある ］場合に、 当の~scrollerが行う何か — ~overscrollを含む — には まったく影響されないのとちょうど同じく。 ◎ 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 above the scroller isn’t affected by the scroller doing anything at all, including overscroll.

4.2. `overscroll-behavior^p 用の物理的な下位prop

［ `overscroll-behavior-x$p ／ `overscroll-behavior-y$p ］~propは、［ 横~軸／縦~軸 ］における`~overscrollの挙動$を指定する。 ［ 横, 縦 ］両~軸に同時に~scrollされたときは、 各~軸における`~overscrollの挙動$が独立に考慮されるベキである。 ◎ The overscroll-behavior-x property specifies the overscroll behavior in the horizontal axis and the overscroll-behavior-y property specifies the overscroll behavior in the vertical axis. When scrolling is performed along both the horizontal and vertical axes at the same time, the overscroll behavior of each respective axis should be considered independently.

4.3. `overscroll-behavior^p 用の~flowに相対的な下位prop

これらの~propは、［ `overscroll-behavior-x$p, `overscroll-behavior-y$p ］~propに対応する。 その対応関係は、 要素の `writing-mode$p に依存する。 ◎ These properties correspond to the overscroll-behavior-x and overscroll-behavior-y properties. The mapping depends on the element’s writing-mode.

5. ~securityと~privacyの考慮点

この特能に対しては、［ ~security／~privacy ］に対する既知な影響iは無い。 この特能は、［ ~overscroll~affordance／~overscroll~navi ］（例： ~pull-to-refresh, ~swipe~navi）などの，ある種の~nativeな~UI特能を防止するために利用できる。 しかしながら，これは、 ~platformにて すでにアリなもの — 例：~scrollにより生じる~event【！event that would cause a scroll】の既定~動作を防止するなど — を超えるような，追加的な能を公開するものではない。 ◎ There are no known security or privacy impacts of this feature. The feature may be used to prevent certain native UI features such as overscroll affordances and overscroll navigations (e.g., pull- to-refresh, swipe navigations). However, this does not expose any additional abilities beyond what is already possible in the platform e.g., by preventing the default action of the event that would cause a scroll.