CSSスクロールスナップポイントの紹介

の CSSスクロールスナップモジュール 私たちにいくつかの制御を与えるWeb標準です。 Webページをスクロールする ユーザーがページのどこかにではなくページの特定の部分にスクロールできるようにする.

スクロール ウェブサイトで最も実行された行動の1つです。ブラウザは、長年にわたって、持っている スクロールパフォーマンスを改善しました ユーザーの素早い指の強さに合わせます。そして、開発者は 創造的にスクロールを使用 より優れた、またはすぐに使えるユーザーエクスペリエンスを実現するため.

しかし、それが相関関係になると コーディングとスクロール, JavaScriptだけが後者をある程度制御できるように見えました。これは長い間そうでしたが、 スクロールスナップポイントの紹介, CSSが追いつき始めた.

スクロールスナップポイントなしでスクロールする

一般的に、私たちは特に電話では、とても遅くスクロールしません。あなたが速くスクロールするほど、あなたが持っているコントロールは少なくなります 画面のどこに行きますか スクロールを止めたとき.

Webサイト上の一連の製品イメージ、写真のギャラリー、またはオンラインスライドをスクロールしているとします。そのようなアプリケーションであなたが望むことは 製品、写真、スライド全体を見る スクロールするたびに。 aだけでなく部製品の画像、写真、またはスライドの.

たとえば、以下のデモでは、ユーザーがスクロールを停止するたびに表示されます。 画像の約半分が見える 画面下部にあります。ただし、ほとんどのユーザーは最後の画像を完全に表示することを好みます。.

スクロールスナップポイントでスクロールする

これが私たちが持ち込むところです CSSスクロールスナップポイント. 名前は一目瞭然です。それは私たちができるCSS標準です。 アイテムを所定の位置にはめ込む スクロール時.

がある 5つのCSSプロパティ それがこの標準を構成します。

スクロールスナップ式
スクロールスナップポイントx
スクロールスナップポイントy
スクロールスナップ座標
スクロールスナップ先

ブラウザサポート

プロパティ 必要 -ウェブキット そして -ミズ 接頭辞 関連ブラウザ用。この記事を書いている時点では、CSSのスクロールスナップはChromeとOperaではサポートされていません。.

最後の4つのプロパティは近い将来ユーザーエージェントによって削除される可能性が高いことに注意してください。代わりに, 新しいプロパティ, すなわち スクロールスナップ整列, スクロールスナップマージン, そして スクロールスナップパディング, 作成される可能性があります, この仕様で定義されているとおり.

しかし、彼らは 同様の目的があります 前者の特性として。現時点では、以前の一連のプロパティは問題なく機能します。.

プロパティ

必要がある を追加 スクロールスナップ式 スクロールコンテナのプロパティ （スクロール中に子がオーバーフローするコンテナ要素）それは指定します スナップアクションの厳密さ. 値は3つあります。

必須 - スクロールが終了すると、スクロールは 適切なスナップポイントでスナップ
近接 - より厳しくない 必須;そうなる の判断に依存する UA 要素が特定のスナップ点でスナップするかどうか
無し - スナップは行われません

の スクロールスナップポイントx そして スクロールスナップポイントy プロパティ スクロールコンテナに属する, も。これらは、スナップポイントが存在することになるx軸とy軸上の点を指します。その価値は によって与えられる 繰り返す（） 関数. たとえば、次の間隔でx軸に沿ってスナップ点を追加するとします。 100px あなたが使用する必要があります scroll-snap-points-x：繰り返し（100ピクセル） ルール.

の スクロールスナップ先 プロパティもスクロールコンテナに追加されます。それ コンテナ上の座標を定義します スナップ先がある場所。このスナップ先で、スクロールしたときにコンテナの子が所定の位置にはまります。.

あなたが使用することができます スクロールスナップ座標 と組み合わせたプロパティ スクロールスナップ先. あなたはそれをコンテナの子要素に追加する必要があります。それ 子要素の座標を定義します, これは、ユーザーが画面をスクロールしたときに、そのスクロールコンテナの移動先の座標に合わせます。.

一度にすべてのプロパティを使用する必要はありません。. のみ スクロールスナップ式 強制的です. それに加えて、個々のスナップポイントを定義するか、目的地座標の組み合わせを使用することができます。.

コード例

これは、次のコードスニペットの例です。 典型的なスクロールコンテナ, と 縦方向にスクロールする. それはあなたがこの記事の始めに見つけることができるデモを出力します.

 div width：300px;高さ：300ピクセル。オーバーフロー：自動;… div> img 幅：250ピクセル;高さ：150ピクセル;…

今、私たち スナップポイントを追加する スクロールコンテナに：

 div width：300px;オーバーフロー：auto。 scroll-snap-points-y：繰り返し（150ピクセル）;スクロールスナップタイプ：必須。

以下で、あなたは出力がどのように見えるかを見ることができます CSSスナップポイントを追加. 下の画像が部分的にしか見えないときにスクロールが止まると、 フル画像が表示されます スクロールポートがその上のスナップ点にスナップした後.