Snappy Scroll with CSS Scroll Snap
記事は上記記事を意訳したものです。
※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。
CSS スクロールスナップは、スクロール可能な要素のスナップポイントを定義できるようにする新しい機能です。これにより、ユーザーのスクロール体験をより細かく制御できます。今回はその仕組みを見ていきましょう。
新しいプロパティ
CSS スクロールスナップモジュールでは、以下の2つの主要な新しいプロパティが導入されました:
scroll-snap-type
: コンテナ要素に適用され、スナッピングの動作を定義します。x、y、または両方を指定できます。また、mandatory や proximity を第二引数として指定できます。mandatory は最も近いスナップポイントにスクロールを強制し、proximity は指定範囲内の任意の位置でスクロールが止まります。scroll-snap-align
: スクロール可能な子要素に適用され、スナップポイントを定義します。start、center、end のいずれかを指定できます。また、none を指定するとスナッピングを無効化できます。
横スクロールのカルーセルの作成
まず、横スクロールのカルーセルを作ってみましょう。各画像がスムーズにスライドし、すぐにスナップするようにしたいと思います。
HTML:
<div class="carousel"> <div class="slide"> <img src="/image-1.jpg" width="600" height="400" /> </div> <div class="slide"> <img src="/image-2.jpg" width="600" height="400" /> </div> <div class="slide"> <img src="/image-3.jpg" width="600" height="400" /> </div> <div class="slide"> <img src="/image-4.jpg" width="600" height="400" /> </div> </div>
CSS:
.carousel { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; } .image { flex: 0 0 100%; scroll-snap-align: center; /* スタイリング関連 */ width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; font-size: 2rem; background-color: #dddddd; }
ここでは、.carousel
コンテナに scroll-snap-type: x mandatory
を適用し、横方向のスナッピングを強制的に行うようにしています。また、.image
要素に scroll-snap-align: center
を設定し、各画像がコンテナの中央にスナップするようにしています。
縦スクロールにする場合は、scroll-snap-type
の値を y
に変更し、Flexレイアウトの方向を垂直にすれば良いでしょう。
.carousel { display: flex; flex-direction: column; overflow-y: scroll; height: 100vh; scroll-snap-type: y mandatory; }
ブラウザサポート
CSS スクロールスナップは、最近のブラウザでサポートされるようになってきています。主要なブラウザの対応状況は以下の通りです:
ブラウザ | デスクトップ版 | モバイル版 |
---|---|---|
Google Chrome | 69以降 | 127以降 |
Mozilla Firefox | 68以降 | 68以降 |
Safari | 11以降 | 11以降 |
Microsoft Edge | 79以降 | 79以降 |
Opera | 64以降 | 80以降 |
Internet Explorer | サポートなし | サポートなし |
Samsung Internet | - | 10.1以降 |
まとめ CSS スクロールスナップは、スムーズでコントロール可能なスクロール体験を実現するための強力なツールです。カルーセル、スライドショー、その他のスクロール可能なレイアウトを構築する際に便利に活用できます。
今回は基本的な使い方を見てきましたが、CSS スクロールスナップにはさまざまな応用例があります。創造的な使い方を探ってみてください。