2018年9月12日

デザイン

CSSだけでスクロール時に画面領域をぴたっと固定(スナップ)することができる, scroll snap

目次

  1. はじめに
  2. Scroll Snapの文法
  3. ブラウザ対応
  4. まとめ

はじめに

今日はCSSだけでスクロール時に画面領域をぴたっと固定(スナップ)することができる,scroll snapをご紹介します。

scroll snap(スクロールスナップ)とはスクロールした時に、特定の画面領域でぴったりスクロールが止まる動きのことを言います。

▼デモ(横にスクロールしてください)▼

See the Pen スクロールスナップ by Ayaka Sasaki (@ayausaspirit) on CodePen.

ブラウザサポートがだんだんとされてきていて、注目を集めているプロパティなので、今回はどういうものなのか、その文法、そしてブラウザの対応状況を簡単にご紹介します。

Scroll Snapの文法

今回のデモは非常にシンプルですが、こちらです。

See the Pen スクロールスナップ by Ayaka Sasaki (@ayausaspirit) on CodePen.

まずは、このようにScroll Snap(スクロールスナップ)の動きを再現するために必要なコアなプロパティを2つご紹介します。

スクロールスナップを作るためには下記2つのプロパティが必要になります。

  • scroll-snap-type
  • scroll-snap-align

scroll-snap-typeはスクロールスナップの動きを実装したい要素の親要素にかけます。
scroll-snap-alignscroll-snap-typeの中の子要素にかけます。

つまりこのようなイメージです。

<div class='container'>
  <section class='page'></section>
  <section class='page'></section>
  <section class='page'></section>
</div>
.container {
  scroll-snap-type: y mandatory;
}

.page {
  scroll-snap-align: start;
}

scroll-snap-type

scroll-snap-typeにはmandatoryproximityの二つの値があります。

mandatoryの値はどんなスクロールが起きても、ページにコンテンツが追加、削除、リサイズなどがされても、snapするようにできています。

proximityの値はもう少しゆるい動きをします。ユーザーがスクロールした時にsnap付近の場合は、snapしてくれますが、どんなときでもsnapしてくれるというわけではないようです。

▼先ほどの例を使い、proximityとmandatoryを比べてみる▼

See the Pen スクロールスナップ1 by Ayaka Sasaki (@ayausaspirit) on CodePen.

x方向とy方向で動きを変えたい場合は、scroll-snap-type-x scroll-snap-type-yと書くことでそれぞれ分けられることができます。

scroll-snap-align

一方、子要素の方にかける scroll-snap-align では中の要素のどの部分に対してsnapするべきなのかをしてすることができます。

scroll-snap-align が持てる値は start, center, endの3つです。

startでは、要素の一番上、もしくは左にsnapします。
centerでは、要素の真ん中にsnapします。
endでは、要素の一番下、もしくは右にsnapします。

基本的に、使う場合はstartを使うことが多いでしょう。

ブラウザ対応

なかなか便利そうな Scroll Snapですが、現状のブラウザ対応の状況はこんな感じになっています。

Can I Use css-snappoints? Data on support for the css-snappoints feature across the major browsers from caniuse.com.

最初に導入された2016年からは格段にブラウザサポート状況もよくはなっていますが、まだまだ使うのにはリスクがあるのでご注意ください。

また、使用される際はScroll Snap用のpolyfillがあるので、こちらも合わせてお使いいただくことをお勧めします。

scrollsnap-polyfill

まとめ

以上、CSSだけでスクロール時に画面領域をぴたっと固定(スナップ)することができる,scroll snapをご紹介しました。
こちらがどんどんサポートされていけば、今後JavaScriptを全く使わず、スクロールスナップが実現できるようになるので、楽しみですね。

1

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP