Widely available 全主要ブラウザで対応済み。安心して使用できる。
スクロール Widely available

Scroll Snap

スクロール操作の終了時に、あらかじめ定義したスナップポイントへ自動的にスクロール位置を合わせる。カルーセルやページ送りのようなUIをCSSだけで実現でき、ユーザー体験を大幅に改善する。scroll-snap-type でスナップの軸と厳密さを、scroll-snap-align で各子要素の吸着位置を指定する。

スクロールUX

概要

スクロール操作の終了時に、あらかじめ定義したスナップポイントへ自動的にスクロール位置を合わせる。カルーセルやページ送りのようなUIをCSSだけで実現でき、ユーザー体験を大幅に改善する。scroll-snap-type でスナップの軸と厳密さを、scroll-snap-align で各子要素の吸着位置を指定する。

対応ブラウザ

デスクトップ

Chrome 69+
Edge 79+
Safari 11+
Firefox 68+

モバイル

Chrome Android 69+
Safari iOS 11+
Firefox Android 68+

基本構文

CSS 
.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

.scroll-container > .item {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

実務での使いどころ

  • 画像カルーセル

    横スクロールで画像を1枚ずつスナップさせるカルーセルをJSなしで実装できる。

  • フルページスクロール

    セクションごとにスナップするフルスクリーンのページ送りUIを実現する。

注意点

  • mandatory は強制的にスナップするため、コンテンツが見切れるケースに注意。proximity の方が柔軟な場合もある。
  • ネストされたスクロールコンテナでは意図しない挙動になることがある。

アクセシビリティ

  • キーボードやスクリーンリーダーでもスナップポイント間を移動できることを確認する。

参考リンク