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を全く使わず、スクロールスナップが実現できるようになるので、楽しみですね。

CSSのお仕事に関するご相談

Bageleeの運営会社、palanではCSSに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

4

0

AUTHOR

sasakki デザイナー

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

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

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

Miu マーケター

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

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

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

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP