レイアウト変更後のスクロール スナップ

Chrome 81 以降では、イベント リスナーを追加しなくても、 応答します。

Adam Argyle
Kaan Alsan
Kaan Alsan
Yi Gu

CSS のスクロール スナップ を使用すると、ウェブ デベロッパーは スクロールのスナップ位置を調整します現在の実装の欠点の一つは、 ビューポートの変更時など、レイアウトが変更された場合、スクロールのスナップが正しく機能しない 画面のサイズが変更されたり、デバイスが回転したりした場合です。この欠点は Chrome 81 で修正されています。

相互運用性

多くのブラウザは、CSS のスクロール スナップの基本的なサポートを備えています。詳細については、CSS を使用できる スクロール スナップ？をご覧ください。

現在のところ、レイアウト後のスクロール スナップを実装するブラウザは Chrome のみ できます。Firefox では チケットを開く 実装すると Safari にも チケットの発行後に再スナップ スクローラーのコンテンツが変更されます。ひとまず、この動作をシミュレートするには、 次のコードをイベント リスナーに追加して、スナップを強制的に実行します。 javascript scroller.scrollBy(0,0); ただし、これによりスクローラーが同じビューにスナップバックするとは限りません。 要素です。

背景

CSS のスクロール スナップ

CSS のスクロール スナップ機能を使用すると、ウェブ デベロッパーは適切に制御された スクロールのスナップ位置を宣言して、スクロール エクスペリエンスを向上させます。これらの掲載位置 スクロール可能なコンテンツがコンテナに適切に配置され、 不正確なスクロールの問題を克服できますつまり、スクロールのスナップ:

  • スクロール時に不自然なスクロール位置が表示されないようにします。
  • コンテンツをページ分けする効果を作成します。

ページ分けされた記事と画像カルーセルは、スクロールの一般的なユースケースの 2 つです。 スナップできます。

<ph type="x-smartling-placeholder">
</ph> CSS のスクロール スナップの例。
CSS のスクロール スナップの例。 画像の水平方向の中央は水平方向の中央に揃えられる スクロール コンテナの

欠点

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
ウィンドウのサイズを変更すると、スナップ位置が失われます。

スクロールスナップを使用すると ユーザーはコンテンツを簡単に移動できますが コンテンツの変更とレイアウトの変更に適応できないため、 説明します。例に示すように、 ユーザーがウィンドウのサイズを変更する場合は、常にスクロール位置を 前にスナップされた要素を見つけますレイアウトが原因で発生する 主な変更点は次のとおりです。

  • ウィンドウのサイズを変更する
  • デバイスを回転させる
  • DevTools を開く

最初の 2 つのシナリオでは、CSS のスクロール スナップがユーザーにとって魅力的ではなくなり、 3 つ目はデベロッパーがデバッグ時の悪夢のような状況ですデベロッパーはさらに こうした欠点を念頭に置いて 動的エクスペリエンスを は、コンテンツの追加、削除、移動などの操作をサポートします。

この問題の一般的な解決策は、プログラムでスクロールを実行するリスナーを追加することです。 上記のレイアウトのいずれかが発生したときにスナップを強制的に実行する JavaScript 役立ちます。この回避策は、 スクローラーを使用して以前と同じコンテンツにスナップバックします。その他の処理 JavaScript では、この CSS 機能の目的が達成されそうにありません。

レイアウト変更後の再スナップ機能を組み込み（Chrome 81）

前述の欠点は Chrome 81 では解消: スクローラーはそのまま スナップすることがよくありますスクロール位置の再評価は 必要に応じて最も近いスナップ位置に再度スナップします。条件 スクローラーが以前、 変更すると、スクローラーはそれにスナップバックします。注意すべき点は 次のようにレイアウトが変更された場合 例:

スナップ位置が失われました
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Chrome 80 では、デバイスを回転してもスナップの位置は保持されません。 「NOPE」というスライドまでスクロールし、デバイスの向きを変更した後 縦向きから横向きにすると空白の画面が表示され スクロール スナップの位置が失われました。
スナップの位置を保持しました
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
デバイスを回転しても、Chrome 81 ではスナップの位置が保持されます。このスライドには、 デバイスの向きが複数回変更されても、NOPE がビュー内に表示されていると表示される。

詳しくは、レイアウト変更後の再スナップ 仕様をご覧ください。 表示されます。

例: 固定スクロールバー

「レイアウト変更後にスナップ」を使用すると、固定スクロールバーをいくつかの CSS の行は次のとおりです。

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

詳しくは、次のデモチャットをご覧ください。 UI です。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
新しいメッセージを追加すると再スナップがトリガーされ、 Chrome 81。

今後の取り組み

現在、再スナップのスクロール効果はすべてインスタントです。フォローアップとして スムーズ スクロールによる再スナップに対応 効果をご覧ください。 仕様に関する問題をご覧ください。 をご覧ください。

フィードバック

皆様からのフィードバックは、レイアウト変更後の再スナップを改善するうえで非常に重要です。引き続きご利用ください。 Chromium のエンジニアが あなたのことを 考えることができます。