CSSのscroll-snapプロパティを使ってスクロール移動でコンテンツの表示領域に合わせる

スムーズで快適なスクロールはUIの一部として採用するサイトも増えて、表示領域にピタッと合わせるスクロール処理は、主にJavaScriptやJavaScriptライブラリであるjQueryを使って実装することが多いかとおもいます。

もちろん、プログラム書いて実装するのもいいですが、JavaScriptやjQueryを使わなくても、CSSのみでコンテンツのブロックに合わせたスムーズなスクロールを実装することができます。

プログラミングに慣れていない人はプログラムを書くのは大変でしょう。コーディングレベルでできたら嬉しいものです。

CSSのscroll-snapプロパティを使うことで、スムーズにオブジェクトに合わせるスクロールが可能となります。

主要なWebブラウザはすべて対応しています。

caniuse（scroll-snap）
https://caniuse.com/#search=scroll-snap

意外と少ない記述で簡単に実装することができます。

それでは見ていきましょう。

scroll-snapでスムーズスクロール

簡単なサンプルとして、Webブラウザの画面全体をコンテンツのセクションとして、スムーズなスクロールの実装をしてみたいと思います。

まずはHTMLから。

HTML


  section1
  section2
  section3
  section4

親要素のdivの中に、各セクションを子要素として構築しておきます。
子要素の各セクションには「s-conts」というクラス名をつけておいて、CSSでコントロールできるように準備します。

続いてはCSSです。

親要素も子要素も高さは、今回のサンプルでは「100vh」とします。子要素の高さは自由に決めてもらっても動きます。backgroundもサンプルとして設定しています。
「overflow: auto;」で、子要素のコンテンツの内容量に合わせて、高さを含め子要素を把握する必要があるため設定します。

CSS

#content-wrap {
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.s-conts {
  height: 100vh;
  scroll-snap-align: start;
}

.s-conts:nth-child(odd) {
  background: #ffdbb6;
}

.s-conts:nth-child(even) {
  background: #99d2ff;
}

親要素にはscroll-snap-typeを設定します。
yを設定することで、垂直軸のみでスナップ位置に合わせることができます。横スクロールのデザインの場合は「x」を設定します。
もう1つ、mandatoryを設定してスクロールアクションで次のスナップ点に合わせます。proximityを設定するとスクロール引数を元にどちらの点に合わせるかを判断するので、中途半端だと上に戻ったりします。

そして子要素のセクションには、「scroll-snap-align: start;」とするだけとなります。
scroll-snap-alignは、要素のどの部分にスナップするかの設定です。「start」はコンテナの最初（縦スクロールは上、横スクロールは左）、他「center（コンテナの中央）」「end（縦スクロールは下、横スクロールは右）」などの設定があります。

以下、実装した動きのサンプルです。
動画（3分ほど）

Webブラウザの画面全体をコンテンツのセクションとしたデザインでは、scroll-snapはすごく使えるプロパティです。
また、高さが設定してあっても、オブジェクトの上部にピッタリと合わせてスクロールしてくれます。

多くのブラウザで対応していますので、UIデザインで必要な時は是非使ってみてください。