CSS Scroll Snap ジェネレーター

scroll-snap-type, scroll-snap-alignをビジュアル設定。スクロールスナップのCSSコード生成。

プレビュー

スクロールしてスナップ動作を確認

CSS

.container {
  scroll-snap-type: y mandatory;
  overflow: auto;
  height: 400px;
}

.item {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

scroll-snap-type

mandatory: 必ずスナップ / proximity: 近い場合のみ

scroll-snap-align

要素のどの位置でスナップするか

scroll-snap-stop

always: 必ず停止 / normal: スキップ可能

スクロールスナップを設定してプレビューで動作確認できます。カルーセルやフルページスクロールなどのUIに適したCSSコードを生成します。