スクロールスナップを使ってみる

フルスクリーンレイアウトでスクロールした時にウィンドウサイズに合わせて
各エリアを表示する場合、これまではJSを用いて対応してきました。

近年ではCSSで対応可能になりました。それが「CSSスクロールスナップ」です。

今回はこのCSSの書き方を学習がてらブログに残していこうと思います。

scroll-snapについて

下記のdemoをスクロールしてみてください。
中途半端にスクロールすると画面のサイズに合うように自動で調整しますよね？
今回はこのソースをもとに説明を行います。

こういったものがJSも使用せずにできるようになるってすごいですよね～！
CSSもめまぐるしく変わります。

See the Pen scroll-snap by sayuri (@giraffeweb) on CodePen.light

scroll-snapの書き方

◆HTML

<div id="pearent">
  <div class="child"><p>1</p></div>
  <div class="child"><p>2</p></div>
  <div class="child"><p>3</p></div>
  <div class="child"><p>4</p></div>
 </div>

親要素と子要素からなるHTMLです。
親要素であるブロックに「scroll-snap-type」を設定します。

◆CSS(SCSS)

#pearent {
  overflow: auto;
  scroll-snap-type: y mandatory; //親要素に指定
  height: 100vh;
  .child {
    scroll-snap-align: start;　//子要素に指定
    height: 100vh;
    display: flex;
    justify-content: center;
    &:nth-child(even) {
      background-color: #00BFFF;
    }
    &:nth-child(odd) {
      background-color: #FF8C00;
    }
    p {
      align-self: center;
    }
  }
}

軸と調整

親要素にはまず軸とどのくらい詳細に調整するか、を指定します。

【軸の種類】
scroll-snap-type: y;　　⇒　縦スクロールが軸
scroll-snap-type: x;　　⇒　横スクロールが軸
scroll-snap-type: both; ⇒　両方が軸

【調整】
調整方法としてscroll-snap-type: 「mandatory」と「proximity」の2種類があります。
スクロールの方向に続いてどの程度厳密に位置調整を行うかが設定できます。
上記の例では「mandatory」を指定しています。
この2つはそれぞれの要素を持っています。

「mandatory」ユーザーがスクロールを停止するたびにブラウザがスナップポイントにスナップする。
「proximity」mandatoryほど厳密ではなく、適切であればスナップポイントにスナップする。

基本的には「mandatory」を設定しておくといいのではないかと思います。

親要素のどの位置で止めるかscroll-snap

子要素には「scroll-snap」プロパティを設定します。
種類としては以下です。

scroll-snap-align: start;
scroll-snap-align: center;
scroll-snap-align: end;

先頭か、真ん中か、末尾がを選択できます。

これでスクロールスナップが簡単に実装できました。
みなさんもぜひやってみてください！

Share: