フーノページ

CSS:決まった位置にスナップさせるスクロール。

〽️ ユーザに気持ちよく操作してもらいたい。

こういうのを作りたいのだが。

こんにちは。「ふ」です。

以前、CSSでの横スクロール実装について紹介しましたが、それはシームレスにスクロールするものでした。

しかし今回はスクロール領域をフリックした時に、前後の要素が「カリッ！」と画面の中央に停止するものを作りたいと思います。

実装していきましょう。

cyan.png

magenta.
png

yellow.png

画像を３枚、準備します。将来的には横並びにするため、flexbox（class名は「snap」としました）と親子関係にしておきます。

HTML

ブラウザ

imgを親要素divに対して上下左右中央揃えにします。見た目は上下のセンタリングは判りませんが。

CSS

.snap > div { display:flex; align-items:center; justify-content:center; }

ブラウザ

親要素「snap」のCSSで、「div」をflexボックス化して横並びにし、水平スクロールで表示されるようにします。

横スクロール実装についての詳細はこちらを参照してください。

CSS

.snap { display:flex; overflow-x: scroll; }

ブラウザ

お・・横並びになったのはいいのだが、要素どうしが隣接してしまいました。
「div」の幅を親要素いっぱいに表示し、flexプロパティをnoneに設定します。

CSS

.snap > div{ display:flex; align-items:center; justify-content:center; 「「１//追加 width:100%; flex:none; 」」 }

ブラウザ

ちゃんと真ん中に配置されましたね ♪ 水平スクロールもできるようになっています。

scroll-snapプロパティ。

扨（さて）、横スクロールは実装できたものの、このままではスクロールさせても上の画像のように、中途半端な位置で要素が表示されてしまいます。

要素を画面中央に「カリッ」と停止させるためには、scroll-snapプロパティをCSSに仕込んできます。仕込んでいきましょう。

CSS

.snap { display:flex; overflow-x: scroll; 「「１//追加 scroll-snap-type: x mandatory; 」」 }

まづ親要素となる「snap」に、「scroll-snap-type」を設定します。

そして、スナップさせる要素のどの部分に照準を定めるかを設定します。「snap > div」セレクタ内に「scroll-snap-align」プロパティ内を記述。

CSS

.snap > div{ display:flex; align-items:center; justify-content:center; width:100%; flex:none; 「「１//追加 scroll-snap-align:center; 」」 }

これで実装完了です。snapスクロールを楽しんでください！

さらなる展望。

CSSだけで実装することのできるスナップスクロール。しかしwebページ適用させるにあたっては、課題が残ります。

この実装はタッチ操作のできるモバイルデバイスにおいては非常に便利ですが、マウス操作が基本のPCの場合、スクロールバーをクリックしてドラッグしなければ閲覧できません。
Apple Magic Mouseのようにマウスの種類によっては水平にスワイプできるものもありますが、まだまだ一般的な仕様とは言えない状況です。

PC表示の場合には要素の左右に「＜」「＞」を表示してそれをクリックして水平スクロールさせるなど、対応した方がいいでしょう。その実装方法についても調べていきたいと思います。