【css】scroll-snapを使ってcssだけの全画面スクロール

scroll-snapを使って全画面スクロール

htmlコード

<main>
<section>1スクロール目</section>
<section>2スクロール目</section>
<section>3スクロール目</section>
<section>4スクロール目</section>
<section>5スクロール目</section>
</main>

cssコード

<style>
main{
  //画面いっぱいに表示
  height: 100vh;
  //縦に厳密にスクロール
  scroll-snap-type: y mandatory;
  //親に指定しないと動かない(srollでも可)
  overflow-y: auto;
}
section{
  //画面いっぱいに表示
  height: 100vh;
  //子要素に指定
  scroll-snap-align: start;
}
</style>

mandatoryをproximityに変更すると多少全画面スクロールが緩くなるけど、ちゃんとsectionごとに綺麗にsnap？される

x軸のは試してない

scroll-snapを扱う上で注意

全画面スクロール作成するうえでの注意になるけど、現在のスクロールの位置が取得できなくなる
スクロール量で発火するjs組んでると扱いずらいかも
使うなら全画面スクロールのプラグイン「fullPage.js」を使ったほうがいいかも