web関連

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

2020/01/03

2020/04/14

scroll-snapを全画面スクロールのサイト作成で使ってみたのでメモ

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>

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

x軸のは試してない

 

scroll-snapを扱う上で注意

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

 

cssだけで全画面スクロールできて便利
だけど色々カスタマイズしようとするとちょっと融通が利かない印象
まだ、おとなしくプラグイン使ってた方がよさげ