1. 序論
~INFORMATIVE~scroll可能な内容に対する UX ~paradigmでは、頁割り†など,内容を論理的な何~節かに区分するものに人気があり、多用されている。 これはとりわけ、~touchによる内容との対話に該当する — 利用者にとっては、~tap~naviを通して階層~構造を掘下げるより,平坦に拡がるように配列された内容を~panする方が、容易かつ素早く操作できるので。 例えば,写真~集の中の多数の写真を閲覧するとき、個々の写真を~tapするより 写真の~slideshowを~panする††方が,利用者には容易い。 ◎ Popular UX paradigms for scrollable content frequently employ paging through content, or sectioning into logical divisions. This is especially true for touch interactions where it is quicker and easier for users to quickly pan through a flatly-arranged breadth of content rather than delving into a heirarchical structure through tap navigation. For example, it is easier for a user to view many photos in a photo album by panning through a photo slideshow view rather than tapping on individual photos in an album.
【† この仕様を通して、語 “頁” は印刷~媒体としての頁ではないことに注意。 】【†† “~pan” — 指先などで内容を直接 “つかんで” ~scrollする操作。 】
しかしながら、~touchによる~panningや, ~mousewheelによる~scrollingには、その性質~上,入力が不精確になる。 特に、内容の頁割り効果を,きちんと制御された~scrolling体験を保証するように作成するのは、~web開発者にとって難しい。 利用者による~panningは、半端な~scroll位置に着地し易く,各~頁は~screen上で部分的になる。 ◎ However, given the imprecise nature of scrolling inputs like touch panning and mousewheel scrolling, it is difficult for web developers to guarantee a well-controlled scrolling experience, in particular creating the effect of paging through content. For instance, it is easy for a user to land at an awkward scroll position which leaves a page partially on-screen when panning.
これを~~達成するため、この~moduleは,~scroll`留め位置$を導入する。 それは、~scrollingの完了-時に,`~scroll容器$の`~scrollport$が終止してよい~scroll位置を施行する。 ◎ To this end, we introduce scroll snap positions which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.
1.1. ~module間の相互作用
この~moduleは、 `CSS2$r の`~overflow節$に定義される~scrolling用の~UI特色機能を拡張する。 ◎ This module extends the scrolling user interface features defined in [CSS2] section 11.1.
この~moduleのどの~propも, `first-line$pe / `first-letter$pe 疑似要素には適用されない。 ◎ None of the properties in this module apply to the ::first-line and ::first-letter pseudo-elements.
1.2. 値
【 この節の内容は CSS 日本語訳 共通ページ に委譲 】
2. 動機を~~説明する例
次の例では、写真~展示を築くため,`~scroll容器$内に一連の画像が配列されているとする。 この例の`~scroll容器$は、その中の写真より(同時に複数の画像が見えるほどに)大きく,画像~sizeもまちまちである。 `mandatory$v の下で要素に基づく留め位置を利用すれば、~scrollingは,画像が~scrollportにて常に中央寄せにされるように 完了する。 ◎ In this example, a series of images arranged in a scroll container are used to build a photo gallery. In this example the scroll container is larger than the photos contained within (such that multiple images may be seen simultaneously), and the image sizes vary. Using mandatory element-based snap positions, scrolling will always complete with an image centered in the scroll container’s scrollport.
img { /* 各~写真の中心が X 軸において`~scroll容器$の中心に整列するように,留ngを指定する。 ◎ Specifies that the center of each photo should align with the center of the scroll container in the X axis when snapping */ `scroll-snap-align$p: `none^v `center$v; } .photoGallery { width: 500px; `overflow-x$p: auto; `overflow-y$p: hidden; white-space: nowrap; /* ~scrollingの完了-時には,~scroll位置が常に留め位置に来ることを要求する。 ◎ Requires that the scroll position always be at a snap position when the scrolling operation completes. */ `scroll-snap-type$p: `x$v `mandatory$v; }
<div class="photoGallery"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> <img src="img4.jpg"> <img src="img5.jpg"> </div>
次の例では、文書の各 “頁” は,`~scroll容器$の辺にある程度近い所に整列するように割付けられる。 これにより,前の頁が~~上端付近に “~~垣間見える” ようになり、利用者は文書の~~先頭でないことが~~判るようになる。 留め位置に `mandatory$v に代わって `proximity$v を利用すれば、利用者は,頁の途中で止めることも可能になる(頁ごとに留めるよう強制するのでなく)一方で、~scrollingが留め位置~近くで終えられたときは,~scrollが調整され,頁は指定されたように整列するようになる。 ◎ This example builds a paginated document that aligns each page near to (but not exactly on) the edge of the scroll container. This allows the previous page to “peek” in from above in order to make the user aware that they are not yet at the top of the document. Using proximity snap positions instead of mandatory snap positions allows the user to stop halfway through a page (rather than forcing them to snap one page at a time). However, if a scrolling operation would finish near a snap position, then the scroll will be adjusted to align the page as specified.
.page { /* 各~頁の上端が留ngに利用されるべきよう定義する。 ◎ Defines the top of each page as the edge that should be used for snapping */ `scroll-snap-align$p: `start$v `none^v; } .docScroller { width: 500px; `overflow-x$p: hidden; `overflow-y$p: auto; /* 各~要素の留め区画を,上端~辺からの~offset 100px の所に整列するべきよう指定する。 ◎ Specifies that each element’s snap area should align with a 100px offset from the top edge. */ `scroll-padding$p: 100px 0 0; /* 留め位置に近い所で~scrollingが終えられたときは、留め位置の所で完了するよう仕向ける。 ◎ Encourages scrolling to end at a snap position when the operation completes, if it is near a snap position */ `scroll-snap-type$p: `y$v `proximity$v; }
<div class="docScroller"> <div class="page">Page 1</div> <div class="page">Page 2</div> <div class="page">Page 3</div> <div class="page">Page 4</div> </div>
3. 概観
この~moduleは、~scrollingの `留め位置@ に対する制御を導入する。 それは、`~scroll容器$の中で,その内容を特定0の~scroll位置に整列させる。 作者は、[ `~scroll容器$上で `scroll-snap-type$p ~propを利用する ]ことにより,[ ~scrollportが~scrollされ終えたとき,近くにある`留め位置$に着地させる ]よう要請できる( `scrollTo()$m ~methodによる,~program的な~scrollも含めて)。 ◎ This module introduces control over scroll snap positions, which are scroll positions that produce particular alignments of content within a scroll container. Using the scroll-snap-type property on the relevant scroll container, the author can request a particular bias for the scrollport to land on a snap position after scrolling operations (including programmatic scrolls such as the scrollTo() method).
`留め位置$は、[ `~scroll容器$ %C の`留域$ ]における,[ 容器~内の要素 %E の`~scroll留め区画$ ]に対する[ 特定0の整列法 ]を通して指定される。 ここで:
- %C の`留域$は、 %C の`~scrollport$を, %C 上の `scroll-padding$p で~~減幅して得られる矩形である。
- %E の`~scroll留め区画$は、 %E の~border~boxを, %E 上の `scroll-margin$p で~~拡幅して得られる矩形であり、既定では %E の~border~boxになる。
- 整列法は `scroll-snap-align$p により指定され、前述の 2 つの矩形のどの位置を互いに整列するかを制御する。
これは、概念的には,`整列~容器$における`整列~対象0$の整列法を指定することに等価になる。 `留め位置$は、指定された整列法を満たすような~scroll位置として与えられる。 ◎ This is conceptually equivalent to specifying the alignment of an alignment subject within an alignment container. A scroll position that satisfies the specified alignment is a snap position.
`~scrollport$の~scroll位置を`留め位置$に整列させるよう調整する動作は、 `留ng@ ( `snap^en / `snapping^en ) と呼ばれる。 `~scroll容器$は、その`~scrollport$の~scroll位置がある`留め位置$にあって,作動中の~scrollingはないとき、その留め位置に`留められ$ているという。 この~moduleは、`留め$の施行-時に利用する精確な~animationや物理的挙動については,何も 指定しないし義務付けない — それは、意図的に~UAに委ねられる。 ◎ The act of adjusting the scroll position of a scroll container’s scrollport such that it is aligned to a snap position is called snapping, and a scroll container is said to be snapped to a snap position if its scrollport’s scroll position is that snap position and there is no active scrolling operation. The CSS Scroll Snap Module intentionally does not specify nor mandate any precise animations or physics used to enforce snap positions; this is left up to the user agent.
要素の`留め位置$が影響するのは、要素の`包含塊の連鎖$において,要素に最も近い先祖の`~scroll容器$に限られる。 ◎ Snap positions only affect the nearest ancestor scroll container on the element’s containing block chain.
4. ~scroll留め区画の捕捉-法: ~scroll容器~上の各種~prop
4.1. ~scroll留ngの規則: `scroll-snap-type^p ~prop
◎名 `scroll-snap-type@p ◎値 `none$v | [ `x$v | `y$v | `block$v | `inline$v | `both$v ] [ `mandatory$v | `proximity$v ]? ◎初 `none$v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終`scroll-snap-type$p ~propは、`~scroll容器$が`~scroll留め容器$になるかどうか、そうであれば,どの~~程度~厳格に`留められ$るべきか,どの軸が考慮されるかを指定する。 `厳格度~値$が指定されていない場合は `proximity$v と見做される。 ◎ The scroll-snap-type property specifies whether a scroll container is a scroll snap container, how strictly it snaps, and which axes are considered. If no strictness value is specified, proximity is assumed.
この例では、見出しへの留ngが,`塊-軸$(横組みでは y 軸, 縦組みでは x 軸)~~方向に可能化されている: ◎ In this example, snapping to headings is enabled in the block axis (the y axis for horizontal writing, x axis for vertical writing):
html { scroll-snap-type: block; /* 文書~全体の~scroll域に適用される ◎ applied to main document scroller */ } h1, h2, h3, h4, h5, h6 { scroll-snap-align: start; /* 表示域の始端(上端)に留める ◎ snap to the start (top) of the viewport */ }
4.1.1. ~scroll留め軸: `x^v, `y^v, `block^v, `inline^v, `both^v 値
以下に定義される各種 `軸~値@ は、[ `~scroll容器$ %C 内の各~要素が~~供する`留め位置$ %P ]は,[ 各~軸ごとに独立に評価されるのか, あるいは 両~軸ともに 2D 点として一緒に評価されるのか ], および[ 前者の場合, %P は どの軸~~方向の`留め$に影響するか ]を指定する: ◎ The axis values specify what axis(es) are affected by snap positions, and whether snap positions are evaluated independently per axis, or together as a 2D point. Values are defined as follows:
- `x@v, `y@v, `block@v, `inline@v
- 順に: %C は、その[ 横~軸, 縦~軸, 塊-軸, 行内-軸 ]~~方向にのみ, %P に`留める$。 ◎ The scroll container snaps to snap positions in its horizontal axis only. ◎ The scroll container snaps to snap positions in its vertical axis only. ◎ The scroll container snaps to snap positions in its block axis only. ◎ The scroll container snaps to snap positions in its inline axis only.
- `both@v
- %C は、その両~軸~~方向において,軸ごとに独立に %P に`留める$。 (したがって、軸ごとに異なる要素に`留められ$得る。) ◎ The scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis).
4.1.2. ~scroll留めの厳格度: `none^v, `proximity^v, `mandatory^v 値
以下に定義される各種 `厳格度~値@ は、`~scroll容器$上で,`留め位置$がどの~~程度~厳格に(~scroll位置の調整を強制することにより)施行されるかを指定する: ◎ The strictness values (none, proximity, mandatory) specify how strictly snap positions are enforced on the scroll container (by forcing an adjustment to the scroll position). Values are defined as follows:
- `none@v
- この値が指定されている`~scroll容器$は、`留めて$は~MUST_NOT。 ◎ If specified on a scroll container, the scroll container must not snap.
- `mandatory@v
- 【“~~義務的”】
- この値が指定されている`~scroll容器$は、[ ~scrollingが作動中でない間,および作動中の~scrollが終了したとき ]は、妥当な`留め位置$が存在するならば,`留められ$~MUST(留め位置が存在しなければ,`留ng$も生じない)。 ◎ If specified on a scroll container, the scroll container is required to be snapped to a snap position when there are no active scrolling operations. If a valid snap position exists then the scroll container must snap at the termination of a scroll (if none exist then no snapping occurs).
- `proximity@v
- 【“~~近接的”】
- この値が指定されている`~scroll容器$に対しては、~UAは — 所与の~scroll~parameterに基づいて,自身の裁量で — ~scrollの終了-時に`留め位置$に`留めて$よい。 ◎ If specified on a scroll container, the scroll container may snap to a snap position at the termination of a scroll, at the discretion of the UA given the parameters of the scroll.
作者は、留め位置に `mandatory$v を利用するときは,多様な[ ~screen~sizeや, 場合によっては内容~size ]を考慮するべきである。 留められている, かつ`~scrollport$より大きい要素への~accessは,~UAにより取扱われるが、特に,同じ`~scrollport$内に 留め位置を~~供する内容, ~~供さない内容が混在する場合、後者の内容は,~screenに比して長いときに~access不能になり得る。 ◎ Authors should use mandatory snap positions with consideration of varyingly-sized screens and (if applicable) varying-sized content. In particular, although access to snapped elements larger than the scrollport is handled by the UA, if authors assign mandatory snapping to non-adjacent siblings, content in between can become inaccessible in cases where it is longer than the screen.
所与の~boxの `~scroll留め容器@ は、次で与えられる:
- [ ~boxの`包含塊の連鎖$において,`留め位置を捕捉する$ ]ような,~boxに最も近い先祖であって、[ `~scroll容器$である, かつ `scroll-snap-type$p 値は `none$v 以外にされている ]もの。
- ここで、[ `~scroll容器$である, または `scroll-snap-type$p 値が `none$v 以外にされた~box ]が、 `留め位置を捕捉する@ とされる。
該当するものがない場合、~boxには`~scroll留め容器$はない。 その場合、~boxの`留め位置$は`留ng$を誘発しないことになる。
◎ A box captures snap positions if it is a scroll container or has a value other than none for scroll-snap-type. If a box’s nearest snap-position capturing ancestor on its containing block chain is a scroll container with a non-none value for scroll-snap-type, that is the box’s scroll snap container. Otherwise, the box has no scroll snap container, and its snap positions do not trigger snapping.文書の内容または~layoutが変化して(例えば内容が 追加-/移動-/削除-/~resize された),`留域$の内容が変化した場合、~UAには,結果の~scroll位置を再~評価して,再度~留めることが要求される。 `~scroll容器$が以前に`留められ$ていた位置 %P からずれたときは、内容の変化-後も %P がまだ存在するならば(例: %P を与えていた要素は削除されていない)、再度 %P に`留められ$~MUST。 ◎ If the content or layout of the document changes (e.g. content is added, moved, deleted, resized) such that the content of a snapport changes, the UA must re-evaluate the resulting scroll position, and re-snap if required. If the scroll container was snapped before the content change and that same snap position still exists (e.g. its associated element was not deleted), the scroll container must be re-snapped to that same snap position after the content change.
4.2 ~scroll留め~padding: `scroll-padding^p ~prop
◎名 `scroll-padding@p ◎値 `length-percentage$t{1,4} ◎初 `0^v ◎適 `~scroll容器$ ◎継 されない ◎百 `~scrollport$の 対応する次元に相対的 ◎ relative to the corresponding dimension of the scroll container’s scrollport ◎算 指定値 — ただし、長さは絶対化される ◎ as specified, with lengths made absolute ◎順 文法に従う ◎ア `長さ, 百分率, calc 式として$ ◎ as length, percentage, or calc ◎表終この~propは,すべての `scroll-padding-*^p 下位prop を一つの宣言でまとめて設定する`略式~prop$であり、各~側を表現している値をその各 下位propにあてがう — `padding$p ~propがその各 下位propにあてがうときとちょうど同じように。 ◎ This property is a shorthand property that sets all of the scroll-padding-* longhands in one declaration, assigning values to the longhands representing each side exactly as the padding property does for its longhands.
負の値は指定されては~MUST_NOT。 各 値は,~scrollportの対応する辺からの内方~offsetを表現し、~scrollportの `最適な~view用~領域@ を定義する — それは、利用者の~viewにモノを配置する領域として利用される。 これにより,作者は、他の内容(固定位置された~toolbarや~sidebarなど)に遮られた~scrollportの領域を除外したり,あるいは 単純に当の要素と~scrollportの各~辺との合間に 余白をとることが可能になる。 ◎ Values must be non-negative and represent inward offsets from the corresponding edge of the scrollport. These offsets define the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
`scroll-padding$p は、実質的に,[ ~scrollingにおいて,表示域の “利用者から見える” と見なされる領域 ]を~offsetして抑制する: その効果は、[ ~layout / ~scroll原点 / 初期~位置 / 要素が実際に可視と見なされるかどうか ]には及ばないが、次には影響して,[ 利用者が、`~scrollport$の`最適な~view用~領域$の中では,内容を途切れなく見れる ]ようにするべきである:
- [ 要素 /~caret ]は,~viewの中へ~scrollされると見なされるかどうか。
- ~paging( PgUp / PgDn ~keyにより, あるいは ~scrollbarから誘発される等価な演算)に対する~scroll量を抑制するかどうか。
`留め容器$に対しては、この領域は `留域@ も定義する。 それは、`~scrollport$内の区画であり,`留め位置$を計算するときに `~scroll留め区画$に対する`整列~容器$として利用される。 ◎ For a scroll snap container this region also defines the scroll snapport—the area of the scrollport that is used as the alignment container for the scroll snap areas when calculating snap positions.
`scroll-padding$p を利用して、~slideshow画像を,[ `~scrollport$内の,固定位置された `.toolbar^css で遮られていない部分 ]の中央に据える例: ◎ In this example, scroll-padding is used to center slideshow images within the portion of the scrollport that is not obscured by a fixed-position toolbar.
body { `overflow-x$p: auto; `overflow-y$p: hidden; `scroll-snap-type$p: `x$v `mandatory$v; `scroll-padding$p: 0 500px 0 0; } .toolbar { position: fixed; height: 100%; width: 500px; right: 0; } img { `scroll-snap-align$p: none `center$v; }
5. ~scroll留め区画の整列-法: 要素~上の各種~prop
5.1. ~scroll留め区画: `scroll-margin^p ~prop
◎名 `scroll-margin@p ◎値 `length$t{1,4} ◎初 `0^v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 指定値 — ただし、長さは絶対化される ◎ as specified, with lengths made absolute ◎順 文法に従う ◎ア `長さとして$ ◎ as length ◎表終この~propは、すべての `scroll-margin-*^p 下位prop を,一つの宣言でまとめて設定する`略式~prop$であり、各~側を表現している値をその各 下位propにあてがう — `margin$p ~propがその各 下位propにあてがうときとちょうど同じように。 ◎ This property is a shorthand property that sets all of the scroll-margin-* longhands in one declaration, assigning values to the longhands representing each side exactly as the margin property does for its longhands.
各 値は、外方への~offsetを表現し, `~scroll留め区画@ — 要素を留域に留めるときに利用される~box — を定義する。 `~scroll留め区画$は、[ 変形された~border~box†から,(`~scroll容器$の座標系に軸が整列された)矩形な限界~boxを見出した結果 ]に 指定された外方への~offsetを加算する††ことにより,決定される。 ◎ Values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
【† CSS Transform による変形と思われる。 】【†† 負数を与えた場合、内方へ~offsetされることになる。 】
注記: これは、`~scroll留め区画$が常に矩形になり,その軸は`~scroll容器$の座標~空間に整列されることを確保する。 ◎ Note: This ensures that the scroll snap area is always rectangular and axis-aligned to the scroll container’s coordinate space.
標的~要素を定義する素片( `target$ps に合致するものや, `scrollIntoView()$m の標的になるもの)へ 頁が~navigateされたときは、~UAは,`~scroll可能な~overflow域$を成す どの区画を~viewの中に持ってくるか決定するときには,要素の`~scroll留め区画$を利用するべきである — 要素の~border~boxではなく。 ◎ If a page is navigated to a fragment that defines a target element (one that would be matched by :target, or the target of scrollIntoView()), the UA should use the element’s scroll snap area, rather than just its border box, to determine which area of the scrollable overflow region to bring into view.
5.2. ~scroll留ngの整列法: `scroll-snap-align^p ~prop
◎名 `scroll-snap-align@p ◎値 [ `none$v | `start$v | `end$v | `center$v ]{1,2} ◎初 `none$v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 2 個の~keyword ◎順 文法に従う ◎ア 不可 ◎表終`scroll-snap-align$p ~propは、要素が生成する~box %~box の`留め位置$を,各~軸ごとに,[ %容器 の中における %対象0 の整列法 ]として指定する — ここで:
- %容器 は、`整列~容器$としての, %~box の`留め容器$の`留域$である
- %対象0 は、`整列~対象0$としての, %~box の`留め区画$である
2 個の値は、順に,留ngにおける[ 塊, 行内 ]軸~~方向への整列を指定する。 値が 1 個だけ指定された場合,その値が 2 個目の値も与える。
◎ The scroll-snap-align property specifies the box’s snap position as an alignment of its snap area (as the alignment subject) within its snap container’s snapport (as the alignment container). The two values specify the snapping alignment in the block axis and inline axis, respectively. If only one value is specified, the second value defaults to the same value.%~box の`留め位置$は、値に応じて,[ 対応する軸において, %対象0, %容器 を次のように整列させる位置 ]として定義される: ◎ Values are defined as follows:
- `none@v
- `留め位置$は定義されず, %対象0, %容器 は互いに整列されない。 ◎ This box does not define a snap position in the specified axis.
- `start@v
- %対象0, %容器 の始端どうしを整列させる。 ◎ Start alignment of this box’s scroll snap area within the scroll container’s snapport is a snap position in the specified axis.
- `end@v
- %対象0, %容器 の終端どうしを整列させる。 ◎ End alignment of this box’s scroll snap area within the scroll container’s snapport is a snap position in the specified axis.
- `center@v
- %対象0, %容器 の中央どうしを整列させる。 ◎ Center alignment of this box’s scroll snap area within the scroll container’s snapport is a snap position in the specified axis.
5.2.1. 妥当な留め位置を可視~boxに~~絞る
~scrollを留める目的は、`~scrollport$の中で,内容が最適に見えるように整列することなので、留めたときに`留め区画$全体が`留域$の外側に出る場合には,妥当な留め位置とは見なされない — `留域$に要求される整列を満たすことになるとしても。 ◎ Since the purpose of scroll snapping is to align content within the viewport for optimal viewing, a scroll position cannot be considered a valid snap position if snapping to it would leave the contributing snap area entirely outside the snapport, even if it otherwise satisfies the required alignment of the snap area.
例えば、`留め区画$は,その上端~辺が`留域$の上端~辺に符合すれば `留域$にて上端が整列される。 これは、`留め区画$が 一部でも~screenに入るならば,`塊-軸$の始端に整列される留ng用の妥当な留め位置と見なされる。 しかしながら,`留め区画$全体が`留域$の外側に出るならば、`~scroll容器$を留められるものと見なすことはできない — 要求される整列が満たされたとしても,~viewerには関わらないので。 ◎ For example, a snap area is top-aligned to the snapport if its top edge is coincident with the snapport’s top edge; and this would be considered a valid snap position for block-axis start-aligned snapping of that snap area if at least part of the snap area is on-screen. If the entire snap area is outside the snapport, however, then the scroll container cannot be considered to be snapped because the required alignment, though satisfied, would not be relevant to the viewer.
なぜ、留ngを,要素が可視であるときのみに制限するのか? ◎ Why limit snapping to only when the element is visible?
WebKit の実装者たちが指摘した ように、留め辺を~canvasを超えて無限に延長すると、 ~gridded【?】~layoutの留ngのみを許容し、~screen外にある要素が,~screen上の要素と整列しないときに,利用者にとって不可解な挙動になる(しかしながら,この要件が実装者にとって荷が重い場合には、~gridded挙動を既定として,後でより賢い挙動を得るような~switchを導入することもできる。) ◎ As the WebKit implementers point out, extending a snap edge infinitely across the canvas only allows for snapping gridded layouts, and produces odd behavior for the user when off-screen elements do not align with on-screen elements. (If this requirement is onerous for implementers however, we can default to a gridded behavior and introduce a switch to get smarter behavior later.)
注記: `scroll-snap-type$p は,`留め位置$を各~軸ごとに独立に評価するが、一方の軸における`留め位置$は,他方の軸における`留め位置$の選び方に~~影響する。 例えば,ある軸から先に`留め位置$を選んで整列した下では、他方の軸における`留め位置$は,`留め区画$を~screen外へ押し出すため無効になる — したがって選べなくなる — こともある。 ◎ Note: Although scroll-snap-type: both evaluates snap positions independently in each axis, choosing of a snap position in one axis can be influenced by snap positions in the other axis. For example, snapping in one axis may push off-screen the snap area that the other axis would otherwise align to, making its snap position invalid and therefore unchooseable.
5.2.2. ~scrollportを~overflowする~boxを留めるとき
`留め区画$が特定0の軸において`留域$より大きい場合、`留め区画$で覆われる`留域$内の~scroll位置のうち,[ 当の軸~~方向の幾何的に直前/直後にある`留め位置$までの距離が,`留域$の当の軸~~方向の~sizeより大きい ]ものが,その軸において妥当な`留め位置$になる。 ~UAは、ある種の~scroll演算(例: 明示的な~paging)に際しては,指定された整列を より精確な標的として利用してよい。 ◎ If the snap area is larger than the snapport in a particular axis, then any scroll position in which the snap area covers the snapport, and the distance between the geometrically previous and subsequent snap positions in that axis is larger than size of the snapport in that axis, is a valid snap position in that axis. The UA may use the specified alignment as a more precise target for certain scroll operations (e.g. explicit paging).
例えば、それぞれが留め区画である何枚かの写真があって,どの留め区画も `mandatory$v に留めるようにされている場合( 2 節 の最初の例)、写真が`~scrollport$より大きい場合には,写真~全体を見て回れるよう~scrollできることが求められるであろう。 ◎ For example, take the first example in §2 Motivating Examples, which had a photo as the area. The author wants mandatory snapping from item to item, but if the item happens to be larger than your viewport, you want to be able to scroll around the whole thing once you’re over it.
`留域$より広い`留め区画$が,`~scrollport$を全部的に埋めている間は、容器は任意に~scrollでき,最初に整列された位置へ戻すように留めようとはしない。 一方で,全部的に埋めなくなるまでに容器が~scrollされたときは、その区画は — 異なる`留め位置$への留ngを誘発するに足るほど~scrollされるまでは — 外方への~scrollingに抵抗する。 ◎ Since the snap area is larger than the snapport, while the area fully fills the viewport, the container can be scrolled arbitrarily and will not try to snap back to its aligned position. However, if the container is scrolled such that the area no longer fully fills the viewport in an axis, the area resists outward scrolling until it is scrolled sufficiently to trigger snapping to a different snap position.
別の例として、入子の `section$e 要素たちにより、(上位~sectionによる)大きい留め区画が,(下位~sectionによる)小さい留め区画で埋められることもある。 ここでは、どの~sectionも[ `mandatory$v かつ, 上端( `start$v )に留める ]ようにされているとする。 十分~短い下位~sectionの中では,正常に留められる一方で、より長い下位~section, あるいは[ 上位~section内の下位~sectionを含まない広い区間 ]の中では,~viewerは任意に~scrollできる: ◎ For another example, mandatory top-snapping on nested section elements can produce large snapping areas (from large top-level sections) potentially filled with smaller snapping areas (from the subsections). When the subsections are small enough, they snap normally; when they’re longer, the viewer can scroll arbitrarily within them, or within a large segment of the top-level section that has no subsections to snap to.
注記: 作者が,~section自身に代えて,その見出しに `mandatory$v 留め位置を設定した場合、 1 番と 5 番の~sectionの内容の一部は,利用者から~accessできなくなる — 見出し留め区画は、~section全体を覆うまで拡張されないので。 そのようなわけで、互いの~~間隔が広い要素たちの留め位置に `mandatory$v を利用するのは悪い案になる。 ◎ Note: If the author had instead set mandatory snap positions on the headings of each section (rather than the sections themselves), the contents of the first and fifth sections would be partially inaccessible to the user, as the heading snap area does not extend to cover the whole section. This is why it’s a bad idea to use mandatory snap positions on elements that might be widely spaced apart.
5.2.3. 到達-不能な留め位置
指定された`留め位置$に到達-不能な場合 — すなわち、そこへ整列させるためには,`~scrollport$において`~scroll可能な~overflow域$の辺を過ぎる所まで~scrollすることが要求される場合 — この`留め区画$に対する各~軸における 使用 `留め位置$は、当の軸~~方向に欲される`留め位置$へ向けて 可能な限り~scrollした結果の位置になる。 ◎ If a snap position is unreachable as specified, such that aligning to it would require scrolling the scroll container’s viewport past the edge of its scrollable overflow region, the used snap position for this snap area is the position resulting from scrolling as much as possible in each relevant axis toward the desired snap position.
5.3. ~scroll留めに対する制限-: `scroll-snap-stop^p ~prop
◎名 `scroll-snap-stop@p ◎値 `normal$v | `always$v ◎初 `normal$v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終ある,意図された方向へ~scrollするとき、`自然な終点$に到達して最終的な~scroll位置を選定する前に、`~scroll容器$は,いくつかの可能な`留め位置$(同じ方向へ~scrollする距離がより短い場合に,留めるに妥当な位置)を “通過-” し得る。 `scroll-snap-stop$p ~propは、そのような可能な`留め位置$が~scrollingを “捉えて” ,それが自然に終止する前に`~scroll容器$を止めるよう強制できるようにする。 ◎ When scrolling with an intended direction, the scroll container can “pass over” several possible snap positions (that would be valid to snap to, if the scrolling operation used the same direction but a lesser distance) before reaching the natural endpoint of the scroll operation and selecting its final scroll position. The scroll-snap-stop property allows such a possible snap position to “trap” the scrolling operation, forcing the scroll container to stop before the scrolling operation would naturally end.
各種 値の定義は: ◎ Values are defined as follows:
- `normal@v
- `~scroll容器$は、~scrollingを実行する間,この要素により定義される`留め位置$を通過してよい。 ◎ The scroll container may pass over a snap position defined by this element during the execution of a scrolling operation.
- `always@v
- `~scroll容器$は、~scrollingを実行する間,この要素により定義される`留め位置$を通過しては~MUST_NOT — ~~遭遇したそのような`留め位置$のうち,最初の所で留め~MUST。 ◎ The scroll container must not pass over a snap position defined by this element during the execution of a scrolling operation; it must instead snap to the first of this element’s snap positions.
この~propは、`終止-位置のみ意図され$ている~scrollingには効果がない — それは、概念的に`留め位置$を “通過しない” ので。 ◎ This property has no effect on scrolling operations with only an intended end position, as they do not conceptually “pass over” any snap positions.
6. 留ngの仕組み
留める際に`留め位置$を選定する~algoの精確な~modelは、意図的に,ほとんど未定義のままにされている — ~UAは、利用者に最善に仕えるような,[ 利用者の意向, 利用者との対話 ]が成す~modelを洗練して,時経過にわたりどう応答するかを調整できる。 ◎ The precise model algorithm to select a snap position to snap to is intentionally left mostly undefined, so that user agents can take into account sophisticated models of user intention and interaction and adjust how they respond over time, to best serve the user.
この節では、[ ~scroll留ngの仕組みについて論じる ]ため, および[ 効果的な~scroll留ng策は どの様なものになるかについて,いくつかの指針を供する ]ために有用になる、いくつかの概念を定義する。 ~UAには、この手引きに適応するように,[ 自身による最善の判定を適用しつつ,留ngにおける自前の挙動を定義する ]ことが奨励される。 それはまた、作者が[ ~scroll留ngを念頭に,自身の~UIを設計する ]ときに依存できるような,[ 最低限の適度な挙動を確保するための,少数の要件 ]も供する。 ◎ This section defines some useful concepts to aid in discussing scroll-snapping mechanics, and provides some guidelines for what an effective scroll-snapping strategy might look like. User agents are encouraged to adapt this guidance and apply their own best judgement when defining their own snapping behavior. It also provides a small number of behavior requirements, to ensure a minimum reasonable behavior that authors can depend on when designing their interfaces with scroll-snapping in mind.
6.1. ~scrolling方式0の種別
頁の~scroll動作は、意図された[ 終止-位置 / 方向 ]の下で遂行される。 ~scrollingは、この 2 つの組合わせに応じて,次に挙げるものに類別される — それぞれが,少しばかり異なる扱いになるような: ◎ When a page is scrolled, the action is performed with an intended end position and/or an intended direction. Each combination of these two things defines a distinct category of scrolling, which can be treated slightly differently:
- `終止-位置のみ意図され@ る~scroll ◎ intended end position
-
`終止-位置のみ意図され$る~scrollに共通的な例としては、次が挙げられる: ◎ Common examples of scrolls with only an intended end position include:
- 勢いを伴わずに放された,~panning~gesture ◎ a panning gesture, released without momentum
- ~scrollbarの “つまみ” を明示的に操作するとき ◎ manipulating the scrollbar “thumb” explicitly
- `scrollTo()$m などの API を介して~program的に~scrollするとき ◎ programmatically scrolling via APIs such as scrollTo()
- 文書の~focus可能な要素を,~tabbing-throughするとき ◎ tabbing through the document’s focusable elements
- 頁~内のある~anchorへ~navigateするとき ◎ navigating to an anchor within the page
- ~homing — Home / End ~keyなどによる ◎ homing operations such as the Home/End keys
- `方向, 終止-位置ともに意図され@ る~scroll ◎ intended direction and end position
-
`方向, 終止-位置ともに意図され$る~scrollに共通的な例としては、次が挙げられる: ◎ Common examples of scrolls with both an intended direction and end position include:
- 勢いを伴う “投げつけ( `fling^en )” ~gestureに解釈されるもの ◎ a “fling” gesture, interpreted with momentum
- `scrollBy()$m などの API を介して~program的に~scrollするとき ◎ programmatically scrolling via APIs such as scrollBy()
- ~paging — PgUp / PgDn ~keyなどによる(あるいは ~scrollbarから誘発される等価な演算) ◎ paging operations such as the PgUp/PgDn keys (or equivalent operations on the scrollbar)
- この~scrollに意図される終点 — 留め点などの特色機能から干渉されない下でのそれ — を指して, `自然な終点@ という。 ◎ The intended end point of the scroll prior to intervention from features such as snap points is its natural end-point.
- `方向のみ意図され@ る~scroll ◎ intended direction
-
`方向のみ意図され$る~scrollに共通的な例としては、次が挙げられる: ◎ Common examples of scrolls with only an intended direction include:
- ~keyboardの矢印~keyの押下げによるもの ◎ pressing an arrow key on the keyboard
- (慣性的でなく)固定的~scrollとして解釈されるような,~swiping~gesture ◎ a swiping gesture interpreted as a fixed (rather than inertial) scroll
加えて、頁の内容は,通例的に[ 縦, 横 ]軸に整列するように~lay-outされるので、~UAは,その方向が[ 縦/横 ]に十分近いときには、~scrollをその `軸に~lock@ することもある。 `軸に~lock$された~scrollは、その軸のみに沿って~scrollするよう束縛される。 これは、入力の仕組みが精確さに欠くときでも,軸からそれていかないようにする。 ◎ Additionally, because page layouts usually align things vertically and/or horizontally, UAs sometimes axis-lock a scroll when its direction is sufficiently vertical or horizontal. An axis-locked scroll is bound to only scroll along that axis. This prevents less-precise input mechanisms from drifting in the non-primary axis.
注記: この仕様が適用されるのは、~UAが~supportする~scrolling方式0に限られる。 ~UAには、特定0の[ 入力/~scrolling ]方式0を~supportすることは,要求されない。 ◎ Note: This specification only applies to scrolling methods supported by the user agent; it does not require the user agent to support any particular input or scrolling method.
6.2. 留め位置の選び方
`~scroll容器$は、その`~scroll可能な~overflow域$に散らばる多数の`留め区画$を持ち得る。 `留め位置$を選定する素朴な~algoは,利用者にとって直感に反する挙動を生産し得るので、選定~algoを設計する際には配慮を要する。 以下に、~~考慮されるべきいくつかの事項を挙げる: ◎ A scroll container can have many snap areas scattered throughout its scrollable overflow region. A naïve algorithm for selecting a snap position can produce behavior that is unintuitive for users, so care is required when designing a selection algorithm. Here are a few pointers that can aid in the selection process:
- `留め位置$は、終点(または`自然な終点$)と最終的に留められる~scroll位置との距離を最小化するよう選ばれるべきである。 これは、この節に挙げる追加の拘束の対象0になる。 ◎ Snap positions should be chosen to minimize the distance between the end-point (or the natural end-point) and the final snapped scroll position, subject to the additional constraints listed in this section.
- ~scrollが`軸に~lock$されていてる場合、~scrollしている間は,他方の軸における`留め位置$は 無視されるべきである(しかしながら、他方の軸における`留め位置$は,依然として 最終的な~scroll位置には効果を及ぼし得る)。 ◎ If a scroll is axis-locked, any snap positions in the other axis should be ignored during the scroll. (However, snap positions in the other axis can still effect the final scroll position.)
- ~screenから遠く外れた要素が,~scroll位置に不可解な効果をもたらさないようにするため、各~要素の`留め位置$のうち,`留域$が定義する “回廊” から遠く外れたものは、無視されるべきである — 回廊とは次を~~意味する: `~scroll可能な~overflow域$を通って移動する回廊 / `方向のみ意図され$ている~scrollにおける~~仮想の “回廊” / `終止-位置のみ意図され$た~scroll後の`留域$。 ◎ In order to prevent a far-offscreen element from having difficult-to-understand effects on the scroll position, snap positions should be ignored if their elements are far outside of the “corridor” that the snapport defines as it moves through the scrollable overflow region, or a hypothetical “corridor” in the direction of a scroll with only an intended direction, or the snapport after an scroll with only an intended end position.
-
~UAは、~scroll方式0に関わらず,利用者が`留め位置$から “逃れられる” ことを確保し~MUST。 例えば、留め種別が `mandatory$v で,次にある`留め位置$が ~screen幅の 2 倍より離れている場合、 “常に最も近傍に留める” ような素朴な選定~algoでは,終止-位置が~screen幅の 1 倍までしか離れていない場合に 利用者を “嵌め続ける” ことになりかねない。 より良い挙動が得られる賢い~algoとしては、終点までの距離が開始時の`留め位置$から相応に近いときに限り,開始時の`留め位置$に戻り、他の場合は 開始時の留め位置を無視することが挙げられる。 ◎ User agents must ensure that a user can “escape” a snap position, regardless of the scroll method. For example, if the snap type is mandatory and the next snap position is more than two screen-widths away, a naïve “always snap to nearest” selection algorithm might “trap” the user if their end position was only one screen-width away. Instead, a smarter algorithm that only returned to the starting snap position if the end-point was a fairly small distance from it, and otherwise ignored the starting snap position, would give better behavior.
(これは、`方向のみ意図され$る~scrollに対しては,開始時の`留め位置$は 常に無視し~MUSTことを含意する。) ◎ (This implies that a scroll with only an intended direction must always ignore the starting snap positions.)
-
標的~要素を定義する素片( `target$ps に合致するものや, `scrollIntoView()$m の標的になるもの)へ頁が~navigateされたとき,その要素に`留め位置$が定義されている場合には、~UAは,要素に最も近い`~scroll容器$が:
- `~scroll留め容器$であるならば,要素の`留め位置$のいずれかに`留める$ことが要求される。 【この “いずれか” は、縦~軸, 横~軸のいずれかの成分を指す?】
- その `scroll-snap-type$p が `none^v にされているときでも,そうして~MAY。
付録 A. 各種~下位prop
[ 物理的, 論理的 ]下位prop(および対応する略式~prop)は、 `CSS-LOGICAL-1$r に定義されるように相互作用する。 ◎ The physical and logical longhands (and their shorthands) interact as defined in [CSS-LOGICAL-1].
`scroll-padding$p 用の物理的な下位prop
◎名 `scroll-padding-top@p,`scroll-padding-right@p,
`scroll-padding-bottom@p,
`scroll-padding-left@p ◎値 `length-percentage$t ◎初 `0^v ◎適 `~scroll容器$ ◎継 されない ◎百 `~scrollport$の 対応する次元に相対的 ◎ relative to the scroll container’s scrollport ◎算 指定値 — ただし,長さは絶対化される。 ◎ as specified, with lengths made absolute ◎順 文法に従う ◎ア `長さ, 百分率, calc 式として$ ◎ as length, percentage, or calc ◎表終
`scroll-padding$p を成すこれらの `下位prop$は、順に,`留域$の[ 上端, 右端, 下端, 左端 ]辺を指定する。 ◎ These longhands of scroll-padding specify the top, right, bottom, and left edges of the snapport, respectively.
`scroll-padding$p 用の~flowに相対的な下位prop
◎名 `scroll-padding-inline-start@p,`scroll-padding-block-start@p,
`scroll-padding-inline-end@p,
`scroll-padding-block-end@p ◎値 `length-percentage$t ◎初 `0^v ◎適 `~scroll容器$ ◎継 されない ◎百 `~scrollport$の 対応する次元に相対的 ◎ relative to the scroll container’s scrollport ◎算 指定値 — ただし,長さは絶対化される。 ◎ as specified, with lengths made absolute ◎順 文法に従う ◎ア `長さ, 百分率, calc 式として$ ◎ as length, percentage, or calc ◎表終
`scroll-padding$p を成すこれらの`下位prop$は、順に,`留域$の[ 塊-始端, 行内-始端, 塊-終端, 行内-終端 ]辺を指定する。 ◎ These longhands of scroll-padding specify the block-start, inline-start, block-end, and inline-end edges of the snapport, respectively.
◎名 `scroll-padding-block@p,`scroll-padding-inline@p ◎値 `length-percentage$t{1,2} ◎初 `0^v ◎適 すべての要素 ◎継 されない ◎百 `~scrollport$の 対応する次元に相対的 ◎ relative to the scroll container’s scrollport ◎算 指定値 — ただし,長さは絶対化される。 ◎ as specified, with lengths made absolute ◎順 文法に従う ◎ア `長さ, 百分率, calc 式として$ ◎ as length, percentage, or calc ◎表終
これらは, `scroll-padding$p を成す`下位prop$であると同時に、前者は[ `scroll-padding-block-start$p, `scroll-padding-block-end$p ]用の, 後者は[ `scroll-padding-inline-start$p, `scroll-padding-inline-end$p ]用の`略式~prop$であり、順に,`留域$の[ 塊-軸, 行内-軸 ]辺を指定する。 ◎ These shorthands of scroll-padding-block-start + scroll-padding-block-end and scroll-padding-inline-start + scroll-padding-inline-end are longhands of scroll-padding, and specify the block-axis and inline-axis edges of the snapport, respectively.
値が 2 個~指定された場合、順に,[ 始端, 終端 ]用の値を与える。 ◎ If two values are specified, the first gives the start value and the second gives the end value.
`scroll-margin$p 用の物理的な下位prop
◎名 `scroll-margin-top@p,`scroll-margin-right@p,
`scroll-margin-bottom@p,
`scroll-margin-left@p ◎値 `length$t ◎初 `0^v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 指定値 — ただし,長さは絶対化される。 ◎ as specified, with lengths made absolute ◎順 文法に従う ◎ア `長さとして$ ◎ as length ◎表終
`scroll-margin$p を成すこれらの`下位prop$は、順に,`~scroll留め区画$の[ 上端, 右端, 下端, 左端 ]辺を指定する。 ◎ These longhands of scroll-margin specify the top, right, bottom, and left edges of the scroll snap area, respectively.
`scroll-margin$p 用の~flowに相対的な下位prop
◎名 `scroll-margin-block-start@p,`scroll-margin-inline-start@p,
`scroll-margin-block-end@p,
`scroll-margin-inline-end@p ◎値 `length$t ◎初 `0^v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 指定値 — ただし,長さは絶対化される。 ◎ as specified, with lengths made absolute ◎順 文法に従う ◎ア `長さとして$ ◎ as length ◎表終
`scroll-margin$p を成すこれらの`下位prop$は、順に,`~scroll留め区画$の[ 塊-始端, 行内-始端, 塊-終端, 行内-終端 ]辺を指定する。 ◎ These longhands of scroll-margin specify the block-start, inline-start, block-end, and inline-end edges of the scroll snap area, respectively.
◎名 `scroll-margin-block@p,`scroll-margin-inline@p ◎値 `length$t{1,2} ◎初 `0^v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 指定値 — ただし,長さは絶対化される。 ◎ as specified, with lengths made absolute ◎順 文法に従う ◎ア `長さとして$ ◎ as length ◎表終
これらは, `scroll-margin$p を成す`下位prop$であると同時に、前者は[ `scroll-margin-block-start$p, `scroll-margin-block-end$p ]用の, 後者は[ `scroll-margin-inline-start$p, `scroll-margin-inline-end$p ]用の`略式~prop$であり、順に,`~scroll留め区画$の[ 塊-軸, 行内-軸 ]辺を指定する。 ◎ These shorthands of scroll-margin-block-start + scroll-margin-block-end and scroll-margin-inline-start + scroll-margin-inline-end are longhands of scroll-margin, and specify the block-axis and inline-axis edges of the scroll snap area, respectively.
値が 2 個~指定された場合、順に,[ 始端, 終端 ]用の値を与える。 ◎ If two values are specified, the first gives the start value and the second gives the end value.
7. ~privacyと~security上の考慮点
この仕様は、すでに DOM に直に公開されているものを超えるような,いかなる情報も公開させない。 これは、~scrollingを少しばかり機能的にするだけである。 新たな ~privacy/~security 上の考慮点はない。 ◎ This specification does not expose any information whatsoever that is not already exposed to the DOM directly; it just makes scrolling slightly more functional. There are no new privacy or security considerations.
8. 謝辞
提案と推奨を寄せられた次の方々に。 うち一部は、この文書に組入れられている:
Many thanks to David Baron, Simon Fraser, Håkon Wium Lie, Theresa O’Connor, François Remy, Majid Valpour, and most especially Robert O’Callahan for their proposals and recommendations, which have been incorporated into this document.
9. 変更点
【 この訳では、参照箇所の引用は省略する。 】
2017 年 8 月 24 日付 勧告候補からの変更点
2017 年 8 月 24 日付 勧告候補 からの変更点は: ◎ Changes since the 24 August 2017 Candidate Recommendation include:
- `target$ps, `scrollIntoView()$m, 等々は、留ngありかどうかに関わらず, `scroll-margin$p を織り込むべきである。 Issue 1 ◎ :target/scrollIntoView()/etc should take scroll-margin into account, regardless of whether snapping is turned on or not. (Issue 1
- `target$ps, `scrollIntoView()$m, 等々は、留ngありの場合には留め位置を利用し~MUST(~SHOULD、ではなく)。 Issue 1 ◎ :target/scrollIntoView()/etc must (rather than should) use snap positions if snapping is turned on. (Issue 1
- `scroll-snap-margin^p から `scroll-margin^p に改称した — [ 留ngの挙動に関わらず,要素へ~scrollするときに余白を供する ]汎用の役割を,より反映するため。 Issue 4 ◎ Renamed scroll-snap-margin to scroll-margin to reflect its more generic role in providing breathing space for scrolling to an element regardless of snapping behavior. (Issue 4)
コメント集積 もある。 ◎ A Disposition of Comments is available.
2016 年 10 月 20 日付 勧告候補からの変更点
2016 年 10 月 20 日付 作業草案 からの変更点は: ◎ Changes since the 23 June 2016 Working Draft include:
- `scroll-padding$p の値は、非~負に制約した。 `1084$issue ◎ Restricted scroll-padding to non-negative values. (Issue 1084) ◎ Values must be non-negative and are interpreted as for padding …
- ~scrolling方式0の種別 節の例に ~pagingと~homing を追加した。 `1605$issue ◎ Added paging and homing operations to examples in §6.1 Types of Scrolling Methods. (Issue 1605)
- 一方の軸における留ngは、他方の軸において,特定0の留め区画へ留めれるかどうかに影響し得ることを明確化した。 `950$issue ◎ Clarified that snapping in one axis may affect whether snapping to a particular snap area is possible in the other axis. (Issue 950) ◎ Although scroll-snap-type: both evaluates snap positions independently in each axis, choosing of a snap position in one axis may be influenced by snap positions in the other axis. For example, snapping in one axis may push off-screen the snap area that the other axis would otherwise align to, making its snap position invalid and therefore unchooseable.
- [ `scroll-padding$p / `scroll-margin$p ]略式~propがそれぞれの下位propにどう値をあてがうかを明確化した。 `1050$issue ◎ Clarified how the scroll-padding and scroll-margin shorthands assign values to their longhands. (Issue 1050)
- ~scroll留ngは、特定0の入力~方式0を義務付けないことを明確化した。 `1305$issue ◎ Clarified that scroll snapping does not mandate any particular input method. (Issue 1305) ◎ This specification only applies to scrolling methods supported by the user agent; it does not require the user agent to support any particular input or scrolling method.
- 各種~scrollingに対する, `scroll-snap-stop$p に意図される効果を明確化した。 `1552$issue ◎ Clarified the intended effects of scroll-snap-stop on various scrolling operations. (Issue 1552)
- `scroll-snap-stop$p が適用されるのは、`~scroll留め容器$におけるすべての`留め位置$ではなく,要素が定義する`留め位置$であることを明確化した。 ◎ Clarified that scroll-snap-stop is applied to the snap positions defined by the element, not applied to all snap positions in the scroll snap container.
- 例における構文の誤りを修正した。 `scroll-snap-type$p 節にも新たな例を追加した。 `827$issue ◎ Fixed some syntax errors in examples and added a new one to the scroll-snap-type section. (Issue 827)