ねはぴれ

スクロールスナップ(css)

エリアにピタッと止まるスクロールスナップというものを紹介します。cssで簡単に実装できますのでよかったら試してみてください。

目次

スクロールスナップとは

こんな感じでそれぞれのエリアにピタッと止まるようなやつです。


以前はJavascriptを使用していたようですが、今はcssのみでやることができるので紹介します。

やり方

親要素と子要素をいくつか用意します。

HTML

<div id="container">
	<div id="first"></div>
	<div id="second"></div>
	<div id="third"></div>
	<div id="fourth"></div>  
</div>

CSS

* {
	margin: 0;
	padding: 0;
}

#container {
  	overflow: auto;
  	scroll-snap-type: y proximity;
	height: 100vh;
}

#container div {
  	scroll-snap-align: center;
  	height: 75vh;
	width: 100vw;
}

#first {
  	background: #2a9d8f;
}

#second {
  	background: #e9c46a;
}

#third {
  	background: #f4a261;
}

#fourth {
	background: #e76f51;
}

親要素である#containerには

scroll-snap-type: y proximity;

を指定しています。


「y」は方向を表していて「x」を使うと、こんな感じで横方向にスクロールできます。

他には、gridレイアウトと

scroll-snap-type: both;

を組み合わせると、縦・横どちらにもスクロールさせることもできます。



proximityというのはスクロールの調整位置を指定していて、

scroll-snap-type: x mandatory;

だとより厳密にスクロールが止まります。

「mandatory」ではそれぞれのエリアにしか止まれませんが、「proximity」はエリアとエリアの中間地点に止まれます。

mandatory

関連記事