スクロールをCSSでピタッと移動させる方法

CSSのみを使いサイトをスクロールした時、次のエリアに切り替わる位置へ吸い付くようにピタッと移動する設定を紹介します。

今回はCSSのプロパティのスクロールスナップを使います。

主に使用するプロパティ

ここで使用するHTMLの構造

<div class="container">
	<section>
		<p>エリア1</p>
	</section>
	<section>
		<p>エリア2</p>
	</section>
	<section>
		<p>エリア3</p>
	</section>
	<section>
		<p>エリア4</p>
	</section>
</div>

縦方向のスクロールの場合

必要最低限のプロパティ

.container {
	overflow: auto;
	scroll-snap-type: y mandatory;
	height: 100vh;
}
section {
	scroll-snap-align: start;
	height: 100vh;
}

解説 – 親要素

overflow: auto;
overflow はコンテンツがエリアに収まらない場合、はみ出すか出さないかの指定。値がauto の場合はユーザーエージェントに依存。はみ出る場合はスクロールバーなどが出ます。

scroll-snap-type: y mandatory;
scroll-snap-type はスナップに対応する方向とスナップの強制力を指定。値のy は縦方向を指定。mandatory はスナップの強制度（ピタッと感）を強くしています。スクロール中を除いて現在のエリアか次のエリアかのどちらかにスナップします。

height: 100vh;
height は高さの指定。100vh は画面の高さ最大まで表示する指定です。高さは適宜調整してください。

解説 – 子要素

scroll-snap-align: start;
scroll-snap-align はスクロール時のエリアの切り替わりをどの位置で止めるかの指定。start はエリアの先頭で止める指定です。

プレビュー

See the Pen scroll-snap-type Y by Hitoshi Matsumoto (@aether14) on CodePen.

横方向のスクロールの場合

必要最低限のプロパティ

.container {
	overflow: auto;
	scroll-snap-type: x mandatory;
	display: flex;
}
section {
	scroll-snap-align: start;
	height: 100vh;
	width: 100vw;
	flex: none;
}

解説 – 親要素

scroll-snap-type: x mandatory;
scroll-snap-type はスナップに対応する方向とスナップの強制力を指定。値のx は横方向を指定。mandatory はスナップの強制度（ピタッと感）を強くしています。スクロール中を除いて現在のエリアか次のエリアかのどちらかにスナップします。

display: flex;
display: flex; コンテンツを横並びにするための指定。

解説 – 子要素

width: 100vw;
width は横幅の指定。100vw は画面の横幅いっぱいに表示する指定です。横幅は適宜調整してください。

flex: none;
flex はフレックスコンテナ内のアイテムの幅をまとめて指定できます。none は width や height プロパティによって大きさが決まり、完全に固定になります。

プレビュー

See the Pen scroll-snap-type X by Hitoshi Matsumoto (@aether14) on CodePen.

今回の主要プロパティの値について

scroll-snap-type

主に使用する値

下記の値は上記の値と一緒に指定することができます。

使用例

scroll-snap-type: y mandatory;

scroll-snap-align

主に使用する値

使用例

scroll-snap-align: start;

レッスン

スクロールスナップの横方向と縦方向のレッスンを用意しています。

見本を参考にレッスンを組み立ててみてください。