Widely available 全主要ブラウザで対応済み。安心して使用できる。
スクロール Widely available

overscroll-behavior

モーダルやドロワー内のスクロールが、背景のページスクロールに連鎖してしまう問題を解決する。overscroll-behavior: contain を指定することで、スクロールの伝播を止められる。モバイルの pull-to-refresh を無効化したい場合にも有効。

スクロールUX

概要

モーダルやドロワー内のスクロールが、背景のページスクロールに連鎖してしまう問題を解決する。overscroll-behavior: contain を指定することで、スクロールの伝播を止められる。モバイルの pull-to-refresh を無効化したい場合にも有効。

対応ブラウザ

デスクトップ

Chrome 63+
Edge 18+
Safari 16+
Firefox 59+

モバイル

Chrome Android 63+
Safari iOS 16+
Firefox Android 59+

基本構文

CSS 
/* モーダルのスクロール連鎖を防止 */
.modal {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* pull-to-refresh を無効化 */
body {
  overscroll-behavior-y: none;
}

実務での使いどころ

  • モーダル内スクロール

    モーダルの中をスクロールしたとき、背景ページが一緒にスクロールするのを防ぐ。

  • pull-to-refresh 無効化

    PWAなどで意図しないブラウザのpull-to-refreshを無効にできる。

注意点

  • none はバウンス効果も無効化するため、プラットフォームらしさが失われることがある。

アクセシビリティ

  • スクロール連鎖の制御はUX改善に寄与するが、ユーザーが期待する挙動を完全に無効化しないよう注意する。

参考リンク