CSS Overscroll + Scroll Snap Generator

overscroll-behaviorとscroll-snapプロパティを組み合わせたCSS生成ツール

Configuration

overscroll-behavior-x

overscroll-behavior-y

scroll-snap-type

scroll-snap-align

scroll-snap-stop

scroll-snap-align: start;

.container {
  scroll-snap-align: start;
  overflow-x: auto;
  display: flex;
  gap: 1rem;
}

overscroll-behavior: スクロール境界に達した際の挙動を制御。親要素へのスクロール連鎖を防ぐことができます。

scroll-snap-type: スクロールスナップの方向と厳格さを設定。 mandatory（必須）またはproximity（近接時）を選択できます。

scroll-snap-align: 子要素がスナップする位置を指定。 start、center、endから選択します。