CSS3

プロパティ

spatial-navigation-action

[Edge]⛌。→●、mdn

スクロール処理との相互作用の制御法。

フォーカスがスクロール コンテナの内側にあって、利用者が空間的ナビを誘発したとき、利用者が ― フォーカスをその方向へ移動するのか、文書をその方向へスクロールするのか ― どちらを要請しているのか、いくぶん多義的になる。
これは、既定では自動的に決定されるが、このプロパティは、フォーカスするのか、スクロールするのか裁定することを作者に許容する。

精確なふるまいは§ ナビに定義されるが、各値による効果の高レベルな記述は下に供される。

空間的ナビが誘発されたときのふるまいは、［現在フォーカスされている要素、またはその先祖］のうち要素に最も近いスクロール コンテナの spatial-navigation-action の値に依存する。

auto

スクロール コンテナの中の要請された方向に、可視かつフォーカス可能な要素が在る場合、それらのうち最も近いものがフォーカスされるようになる。他の場合、スクロール コンテナは要請された方向へスクロールされる。

focus

スクロール コンテナの中【の要請された方向】に、フォーカス可能な要素が在れば ― それが可視かどうかに関わらず ― フォーカスは、それらのうち最も近いものへ移動される。無い場合、スクロール コンテナはスクロールされないことに加え、探索は先祖上の連鎖へ遡るように継続される。

注記： スクロール コンテナは、それまでビューに入ってなかった要素をフォーカスすることによる副作用として、スクロールされ得るが、ある方向へスクロールされることはない。

注記： spatial-navigation-action に focus 値を与えた場合、空間的ナビゲーション コンテナの表示域の中で、所与の方向に可視な候補が無いときは、navnotarget イベントが生じる ― 当のコンテナをもっとスクロールできるときでも。

scroll

現在フォーカスされている要素がスクロール コンテナでない場合、先祖スクロール コンテナ上のこの値は auto と同じ効果になる。

現在フォーカスされている要素がスクロール コンテナである場合、フォーカス可能な子孫の有無に関わらず、要請された方向にスクロールされ、どの要素がフォーカスされているかは変更しない。

注記： このことは、［フォーカスをスクロール コンテナへ移動して、そこへスクロールしつつ、その子孫へはフォーカスを移動しない］ことに、空間的ナビゲーションを利用できることを意味する。しかしながら、フォーカスが他の何らかの手段（ Tab キーを押したり、focus()● メソッドを利用するなど）により子孫に移動された場合は、空間的ナビゲーションは、フォーカスを他のフォーカス可能な子孫へ移動することに利用され得る。

注記： 値 scroll はリスク下にある。

注記： この仕様の早期のバージョンは、［ 値 focus により定義されるふるまいを任意選択で選ぶための宣言的な仕方 ］を提供していなかった代わりに、作者がそのふるまいを自身で実装できるよう［スクロールする前に発火される取り消し可能なイベント］を提供していた。しかしながら、スクロール処理に関係する取り消し可能なイベントは処理能の問題をもたらし得るので、このイベントは除去され、代わりに spatial-navigation-action プロパティが導入された。

<div class='scroller'>
    <button class='item'>Box 1</button>
    <button class='item'>Box 2</button>
    <button class='item'>Box 3</button>
</div>

.scroller {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    height: 300px;
    width: 200px;
    overflow-y: scroll;
    spatial-navigation-action: focus;
}
.item {
    height: 100px;
    width: 100px;
    margin: 50px auto;
    background-color: blue;
}
:focus {
    background-color: red;
}

テスト