長い静的ページでは、文書スクローラー、独自の overflow:auto を持つスティッキー目次、背後へモメンタムを伝播させたくないモーダルが同時に存在します。明示的な制御がないと、WebKit のラバーバンド効果が最内のスクローラーから祖先へ連鎖し、背景の誤スクロール、CTA の誤タップ、計測上のインタラクションノイズを生みます。2026年は、適切なスクロールコンテナへ overscroll-behavior: contain を置くことと、scrollbar-gutter: stable や 固定ヘッダー向け scroll-padding を組み合わせ、スクロールチェーン・スクロールバー予約・ハッシュ位置合わせを Safari と iOS で一貫した物語にすることが現実的な標準です。
MacHTML の Mac mini をおおよそ1日16.9米ドルで借りて rehearsal すると、デスクトップ専用の Chromium 自動化では再現が不安定な iOS 特有のモメンタム不具合を、継続的インテグレーションの前に押さえられます。
スクロールチェーンと既定の挙動
スクロールチェーンとは、ネストしたスクローラーが端に達したあと、余ったホイールやタッチデルタが祖先へ伝わる現象です。料金表だけをスクロールさせたい利用者が、ヒーロー動画まで動かしてしまう典型例です。デスクトップ Safari と iOS WebKit は既定で連鎖し、Chromium 系も同様なので、一度直せばエバーグリーン各社に効きます。
モーダル開閉中に body へ安易に overflow: hidden を当てるのは、iOS の背景ロックパターンや支援技術との相性を壊しがちです。代わりにモーダルのスクロール可能領域へ overscroll-behavior-y: contain を置き、横方向のカルーセルが履歴ナビジェスチャへ横漏れしないよう overscroll-behavior-x: none を選ぶ、という組み合わせが筋が良いです。
モーダル本文での contain
実際にスクロールバーを握る要素へ適用します。
.modal__body {
max-height: min(70vh, 640px);
overflow: auto;
overscroll-behavior: contain;
}contain はチェーンを止めつつモーダル内の位置変更は許します。横スライダと縦モーダルスクロールが同居する iOS では touch-action: pan-y を併用し、横パンと縦スクロールの競合を減らします。
ネイティブ <dialog> では backdrop がユーティリティを継承しません。フォーカス可能な領域が二重にあるなら、dialog 要素と内側スクローラーの双方へルールを複製してください。
none が安全な場面
Android WebView ハイブリッドでプルリフレッシュを止めたい、横固定の分析チャートからスワイプによる戻る／進むを絶対に起こしたくない、といったときは overscroll-behavior: none が手早いです。ヘルプになるオーバースクロール表現も抑える重めの指定なので、まず contain を試し、足りなければ none へ進みます。
地図やキャンバスダッシュボードでは、ドラッグジェスチャを局所に閉じる目的で両軸 none が必要になることがあります。ズーム操作が生きているかは必ず実機で確認します。
auto と明示リセット、ブレークポイント
広い幅では目次がスクロールせず、狭い幅で overflow:auto になる、という切り替えはメディアクエリで overscroll ルールをネストスクローラーが存在するときだけ有効化するのが安全です。
@media (max-width: 900px) {
.toc { overflow: auto; overscroll-behavior: contain; max-height: 40vh; }
}レイアウト変化時に contain を外し忘れると、デスクトップ QA は通ってもモバイルで文書への連鎖スクロールが失われる、という退行が起きます。
iOS Safari、touch-action、パッシブリスナ
iOS はモメンタムスクロールとジェスチャ認識を密接に結びつけています。第三者計測がパッシブなホイールリスナへ preventDefault を期待しているなら CSS だけでは救えません。スニペット監査を併走させ、スクロールはブラウザに任せる設計が overscroll と相性が良いです。
120Hz ProMotion 実機では減速曲線が短く感じられ、同じ物理でも連鎖オーバースクロールが強く感じることがあります。最低スペック端末と最新端末の両方で触ってください。
アクセシビリティ：フォーカストラップとスクロール
モーダルがフォーカスを閉じ込めるなら、スクロール可能領域がタブ順や矢印キーで到達できるよう設計書に明記します。スクリーンリーダ利用者はラバーバンドを見えなくても、連鎖スクロールで背後ページが動き名前付き位置がずれる不快感を受けます。
prefers-reduced-motion は overscroll-behavior 自体を無効にはしませんが、動きを抑える利用者向けに最大高を抑え、不必要なスクロール深さを強いない工夫と併用します。
role="dialog" を持つ要素と、開時に tabindex="0" でフォーカスを受ける子をどちらに置くかを文書化し、本文にフォーカスがあるとき背後へホイールが伝播しないことを QA で確認します。
性能、合成、will-change の落とし穴
overscroll-behavior 単体は軽い一方、同じモーダル積みに backdrop-filter と will-change: transform を重ねるとモバイル Safari で余分な合成レイヤが増え、メモリを食います。WebKit のレイヤタブで、古い iPad で 512MB 級の GPU 使用量が跳ねていないか確認し、影の複雑さを先に疑います。
カード全部に will-change: scroll-position を敷くのは避け、開いているモーダルの存続時間だけスコープします。
文書上のスクロール駆動アニメと、チェーン拒否のネストスクロールが同居するとタイムラインが噛み合わないことがあります。効果のターゲットを内側スクローラへ移す選択肢も検討します。
印刷スタイルと PDF 出力
コンプライアンス PDF は静的ページから印刷される場面が残ります。@media print では overscroll を auto に戻し、WebKit エミュレーションがモーダル最大高で内容を切らないようにします。ダイアログの背景は隠し、文書の overflow を元に戻します。
ヘッドレス Chromium の PDF はインタラクティブ Safari と挙動差があり、.modal { position: static; max-height: none; overflow: visible; overscroll-behavior: auto; } のような印刷専用 CSS で条文の欠落を防ぎます。
ネスト contain 導入前後で PDF ページ数の回帰スナップショットを比較し、カルーセルが印刷で潰れなくなったことによるページ増を早期に検知します。
判断表：contain、none、auto
| UI パターン | 推奨 | 注記 |
|---|---|---|
| モーダル法務テキスト | contain | ヒーローの漂流を止める |
| ネストデータグリッド | グリッドに contain、文書は auto | グリッド非フォーカス時はページスクロールを維持 |
| 履歴リスクの横スワイプカルーセル | 軸に none | Android WebView は別検証 |
| 全画面地図 | none | ズームジェスチャの生存確認 |
リリース前フィールドチェックリスト
サポート下限の iOS と最新 Safari Technology Preview の両方で走らせ、マイナー版の間で WebKit がスクロール連鎖の解釈を締めた差分を拾います。マーケが全幅動画ヒーローをモーダル背後に残す場合は、デザインレビュー用に画面録画を残します。
- モーダルを開き、勢いよく端までスクロールさせ、背後ページが動かないこと。
- VoiceOver ／ TalkBack でモーダル内フォーカスを置いた状態で繰り返す。
- 1280px から 320px へリサイズし、メディアクエリの contain 切替を確認する。
- CLS を測り、scrollbar-gutter と併せてスクロールバー出現時の幅跳ねを抑える。
- scroll-padding 有効のままフッタアンカへ飛び、ネスト目次端の overscroll がジャンプの仕上げを奪わないこと。
洗練された静的 HTML とは、外側の文書だけでなく各スクロールコンテナの物理まで所有することです。モーダル直後に document へバブルしたホイールがゼロかをテレメトリへ1行足し、Playwright で 200 回フリングしてもカウンタが増えないことを断言できると安心です。
MacHTML の Mac mini（およそ1日16.9米ドル）は、ネイティブ Safari と Apple Silicon を同じ机に置き、ネストスクロール・モーダルのフォーカストラップ・ProMotion のタイミングを、デザイナが普段使う環境に近い形で再現するのに向きます。
クラウド Mac mini で overscroll とモーダルを検証
専用 macOS へ SSH／VNC し、スクロール連鎖・ダイアログ積み・ハッシュナビをまとめてサインオフします。