領域にピタッとスクロールする「scroll-snap-type」#1 StyleSheet設定

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

まじめに仕事をすると、ブログのネタが増える、下駄です。
 

今対応している案件で、とある会社から、LP(LandingPage)を作って欲しいという依頼があったんですが、
 

全部で5回のアップデートがあり、それぞれの詳細日程は直前まで不明、内容などについても、直前にならないとわからないという内容で、
 

「簡単なwebコーディング」ということだけで、5人日程度で引き受けた内容だったのですが、
蓋を開けてみると、「重工なアニメーション」やら、「トップバナースライダー」というような、まあまあ工数を使うプログラミングも入ってきていたので、追加費用項目が膨らむ予感がしているんですが、
 

今回は、スライダーライブラリなどを使わなくても、独自で書いたナンチャッテ・スライダーが、今後もまあまあ使えそうだったので、それをまとめておきたいと思います。

簡単にスライダー構築

https://on-ze.com/archives/4996
 

スマートフォンの登場で、カルーセル機能が必須になってきましたが、そうしらスライダーライブラリを評価してくれているブログサイトなどもあり、手軽に構築できる状況ですが、
 

どのライブラリもクセがあり、多少の難もあるようです。
 

僕も、個人的に使うカルーセルライブラリは、以前に作ってgithubにもアップしているのですが、
 

http://wordpress.ideacompo.com/?p=16655
 

どうやら、css3には強力な機能が備わっていて、もっと簡単に構築できるようなので、今回はその機能を使ってネイティブコードで簡単にスライダーを構築してみます。
 

scroll-snap-typeについて

その機能が「scroll-snap-type」です。
 

この機能は、スクロールが発生するエリアで、そのエリアサイズにピタっと合わせてくれる機能で、カルーセル機能そのまんまというぐらい、ドンピシャの機能になります。
 

ちなみに、スマホ表示した画面は、ページ全体が縦スクロールすると思いますが、センテンス毎に縦スクロールもピタッと画面に合わせてセンテンストップを持ってくることもできるようです。
 

これは覚えておくとかなりUIに役立つ機能になりそうですね。

ソース

 

 

See the Pen
own-slider
by YugetaKoji (@geta1972)
on CodePen.


 

簡単な構図ですが、非常にシンプルにカルーセル処理ができていることがわかります。
 

解説

PCで見た時に、overflowのscroll表示を無くすために、cssの「Scrollbar-hidden」をいう機能を追加していますが、
これは、このスライダー処理以外の場所でも使えるので、表示をなくしたい場合に使い回せるので、覚えておいたほうがいい機能です。
 

ブラウザの種類によって、書き方が違うので、まとめてみました。
 

今回はカルーセルで横スクロールで使ったので、”scroll-snap-type: x mandatory;”としましたが、縦スクロールで使いたい場合は、”scroll-snap-type: y mandatory;”です。
 

リファレンスサイトを見ておくと、色々な使い方が思いつくかもしれません。
 

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type
 

ちなみに、スライダー内のコンテンツがサイズ100%でなかった場合、横スクロールでは、コンテンツの左端がフィットするように動作します。
 

センタリングするやり方が今の段階で見つけられなかったので、柔軟なカルーセル構築できるように、もう少し調べてみたいと思います。

対応ブラウザ調査


 

とりあえず、最新ブラウザであれば、動作するようですね。
 

やはり要注意は古いIEですね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です