ブログ

scroll-snapと​scroll-behaviorで​実現できることを​解説するよ

「CSS Scroll Snap Module」とscroll-behaviorというプロパティで何ができるかという声を聞きました。使い方がちゃんと用意されているので解説します。

scroll-behaviorプロパティでできること

scroll-behaviorプロパティは、CSS Object Model (CSSOM)という現在策定されている新しいCSSプロパティの1つになります。CSS Object Model (CSSOM)は、2016 年3月17日にW3CのWorking Draftとなっています。

CSS Object Model (CSSOM) のscroll-behaviorプロパティでできることは、一言で言うと、「スムーススクロールがCSSでできる」ということです。

従来はページ内リンクをどうさせると、アニメーションも何もなくいきなり移動してしまいました。この挙動はユーザーが戸惑うことがあります。
CSS Object Model (CSSOM) のscroll-behaviorプロパティを利用することで、ページ内リンクの移動がアニメーションで移動することが可能です。

2018年2月時点のブラウザサポート状況ですが、FirefoxとChromeでサポートされています。
その他のブラウザではサポートされていません(Can I Use)。

scroll-snapプロパティでできること

scroll-snaprプロパティは、現在「CSS Scroll Snap Module」 としてCSS WGのドラフト版で出されています。
また、2017 年12月14日にはW3Cでも勧告候補(Candidate Recommendation)になっています。

それでは、「CSS Scroll Snap Module」 では何ができるのでしょうか?

「CSS Scroll Snap Module」 を利用すると、スワイプしたりマウスドラッグしたら、特定のポイントに自動的にスナップできます。もちろん、縦横両方の指定が可能です。
ただし、CSSで横幅または縦幅の指定が必要になりますので注意しましょう。

2018年2月時点のブラウザサポート状況ですが、FirefoxとSafariでサポートされています。
Google Chromeではサポートされていません(Can I Use)。

scroll-snapとscroll-behaviorというプロパティを組み合わせるとどうなるか

さて、「CSS Scroll Snap Module」のscroll-snapプロパティ、どう利用するかわからない人も多いかと思います。

scroll-snapプロパティはそれ単独では、使い道があまりないプロパティです。
しかし、scroll-behaviorプロパティと組み合わせると、ものすごく使えるプロパティになります。

scroll-snapとscroll-behaviorの2つを組み合わせると何ができるでしょうか?

  • パララックスがCSSだけで実現可能
  • 縦・横それぞれで動作するスライダーがCSSだけで実現可能

今回はサンプルを用意しました。旧プロパティだけ、かつFirefoxだけで動作するサンプルになります。

まとめ

scroll-snapとscroll-behaviorを組み合わせることで、CSSだけでパララックスやスライダーが簡単に実現可能になります。どんどんJavaScript不要でリッチなコンテンツを作ることが可能になります。