横スワイプでぴたりと止まる
scroll-snap
横に並べた写真を、1枚ずつ止めながら見せる。指を離した位置ではなく、決めた位置で止まる。
AIへの頼み方
写真を横に並べたカルーセルを、JavaScript なしで1枚ずつぴたりと止まるようにしてください。親に scroll-snap-type: x mandatory、子に scroll-snap-align を指定してください。次の1枚が少し見える幅にして、横に動くと分かるようにしてください。
動くデモ
この項目のデモは自動では動きません。操作して確かめてください。
全画面で見る ↗最小コード
/* 親：横スクロールできる箱にして、止め方を決める */
.track {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory; /* 横方向に、必ずどれかで止める */
}
/* 子：どこで止まるか */
.slide {
flex: 0 0 78%; /* 次の1枚が少し見える幅にすると「横に動く」と伝わる */
scroll-snap-align: center; /* 中央で止める（start / end も選べる）*/
scroll-snap-stop: always; /* 勢いで飛ばさず1枚ずつ止める */
}
/* proximity にすると「近ければ止まる」ゆるい挙動になる。
縦方向のページ送りなら scroll-snap-type: y mandatory。*/対応状況
定番 2026年08月時点で確認
Baseline widely available（newly 2020-01-15 / widely 2022-07-15）。
実案件でそのまま使える。ライブラリを入れる前にまずこれを試す。
対応状況は自動更新していません。確認日より後の変化はこのページに反映されていない場合があります。
使いどころ／避けどころ
写真の並び、事例の紹介、料金プランの比較など、横に並べて1つずつ見せたいものに向く。カルーセル用のライブラリを入れなくても、CSS の2行でそれらしく動く。指で払ったときの慣性や、端末ごとの操作感はブラウザに任せられる。
コツは次の1枚を少しだけ見せること。1枚が画面いっぱいだと、横に動かせること自体に気づかれない。8割くらいの幅にして、右端に次が覗いている状態にする。
避けたいのは、縦に読ませたい内容を横に並べること。横スクロールは「見比べる」動きであって「読み進める」動きではない。文章は縦に置く。
矢印ボタンを省かないのも大事になる。指で払える端末ではいいが、マウスだけの環境では横に動かせることに気づきにくい。ボタンを添えるなら scrollBy を呼ぶだけで済む。
mandatory は必ずどこかで止まるので迷いがないが、要素の高さがばらばらだと引っかかった感じになる。ゆるくしたいときは proximity にする。
止まる位置を細かく決めたいときは、親の余白（scroll-padding）も合わせて調整する。左端に少し余白を残すと、止まったときの見た目が落ち着く。