スクロールを途中で止めるか、位置へ寄せるか：scroll-snap-typeのproximityとmandatory

カードをスクロールしたあと、見出しが少しだけ切れて止まる。カードの上端へ寄せたい場合は、CSSのスクロールスナップを使えるよ。ただ、いつも決まった位置へ寄せるか、必要に応じて寄せるかは選べる。

今回は、固定した高さのカードが縦に続く小さな作例で、scroll-snap-typeのnone・proximity・mandatoryを比べる。スクロールできる箱の基本が分かる人向けだよ。

スクロールする側に、方向と厳しさを指定する

.scroller {
  height: 160px;
  overflow-y: auto;
  scroll-snap-type: y proximity;
}

yは縦方向。proximityは、スクロールを終えたとき、ブラウザの判断によってスナップ位置へ寄せる値だよ。どの距離なら寄せるかを、この指定だけでpx単位に固定できるわけではない。

mandatoryは、スクロールが止まっているときにスナップ位置へ合わせる厳しい指定。noneなら、スナップ位置を使わずにスクロールする。同じ内容でも、止め方の印象が変わるんだ。

proximityを選んでも、毎回途中に止まるとは限らない。mandatoryも、必ず一枚ずつしか移動できないという指定ではないよ。スクロールの距離や操作方法を含め、実際の操作で確かめたいね。

子のどこへ合わせるかも必要

親にscroll-snap-typeを書いただけでは、各カードの上端という候補をすべて決めたことにはならない。子のカードには、scroll-snap-alignを指定する。

.panel {
  height: 160px;
  scroll-snap-align: start;
  margin-bottom: 16px;
}

startは、ここではカードの上端とスクロール領域の上端を合わせるために使っている。今回の横書き・通常の縦スクロールという条件での説明だよ。方向や書字方向を変えた部品へ、そのまま位置の呼び方だけを当てはめないようにしよう。

親は「どの方向に、どの厳しさで止めるか」、子は「合わせる候補をどこにするか」。この二つを分けると、指定する場所を探しやすいね。

途中へ移動するボタンで比べよう

作例のカードは高さ160px、カード間の間隔は16px。候補となる上端は0px、176px、352pxになる。外側のページではなく、作例の小さな箱の中を動かすよ。

1. noneで「1枚目の途中72pxへ」を押す。実際の位置が72pxになることを見る。
2. 「先頭へ」で0pxへ戻してから、y mandatoryへ切り替える。
3. もう一度72pxへのボタンを押し、スナップ後の実際の位置を比べる。
4. y proximityでも同じ操作をし、このブラウザが寄せるかを観察する。
5. 箱の中を手でスクロールし、2枚目・3枚目の内容へ進めることを見る。
6. 「最初から試す」でnoneと先頭へ戻す。

表示欄は、ボタンが要求した位置と、実際に止まった位置を分けている。作例のChromiumでは、noneの72pxとmandatoryの0pxを確認した。proximityの結果を、すべてのブラウザで必ず同じになるルールとして覚えないでね。

アニメーションの指定とは違う

スナップは、スクロールが落ち着く位置についての指定。速度や移動の物理的な感じまでscroll-snap-typeで細かく指定するわけではない。滑らかに動かすかどうかなど、ほかの指定とは役割を分けよう。

今回のボタンは観察のため即時の移動を要求している。自動でページを送ったり、読んでいる途中にタイマーでカードを進めたりはしないよ。

長い内容でも読めるかを確認する

カードが短い見本だけで選ばず、説明が長くなった状態、文字を拡大した状態、キーボードやタッチ操作でも確認したい。実際の部品ではカードの高さが一定とは限らないからね。

この作例は小さな領域の比較であり、ページ全体へmandatoryを付ける提案ではない。文章を途中の位置で読みたい場面もあるので、読者が必要な場所へ止まれるかを目的から選ぼう。

スクロール領域の作り方はoverflowのhiddenとauto、リンクで飛んだ見出しの位置はscroll-marginへ。自動の動きとの付き合い方は動きを減らす設定も参考になるよ。

確認日：2026年11月1日。MDNで二つのプロパティを確認し、240px・319px・1280px幅のChromiumで指定の切り替え、スクロール位置とリセットを検証した。