コンテンツへスキップ

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

scroll-snap

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

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

主に使用するプロパティ

プロパティ説明設置場所
scroll-snap-typeスナップに対応するスクロールの方向やピタッと感を指定親要素
scroll-snap-alignスクロール時次のエリアのスナップさせる位置を指定子要素

ここで使用する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

主に使用する値

説明
x横方向のみにスナップする
y縦方向のみにスナップする
both横と縦の両方向にスナップする

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

説明
mandatory次のエリアにスクロールした時、ピタッと吸い付くようにスナップする
proximityスクロールの移動の仕方によってはスナップしない場合があります。mandatoryよりピタッと感が緩い仕様

使用例

scroll-snap-type: y mandatory;

scroll-snap-align

主に使用する値

説明
start次のエリアの先頭にスナップする
end次のエリアの末尾にスナップする
center次のエリアの中央にスナップする

使用例

scroll-snap-align: start;

レッスン

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

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

タグ: