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

overscroll-behavior

overscroll-behavior は CSS のプロパティで、スクロール領域の境界に達したときのブラウザーの挙動を設定します。

スクロールUX

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
overscroll-behavior
63
18
59
16
63
16
その他
css.properties.overscroll-behavior-block

overscroll-behavior-block は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。
77
79
73
16
77
16
CSS プロパティ
auto
77
79
73
16
77
16
contain
77
79
73
16
77
16
none
77
79
73
16
77
16
その他
css.properties.overscroll-behavior-inline

overscroll-behavior-inline は CSS のプロパティで、スクロール領域のインライン方向の境界に達したときのブラウザーの挙動を設定します。
77
79
73
16
77
16
CSS プロパティ
auto
77
79
73
16
77
16
contain
77
79
73
16
77
16
none
77
79
73
16
77
16
その他
css.properties.overscroll-behavior-x

overscroll-behavior-x は CSS のプロパティで、スクロール領域の水平方向の境界に達したときのブラウザーの挙動を設定します。
63
18
59
16
63
16
CSS プロパティ
auto
63
18
59
16
63
16
contain
63
18
59
16
63
16
none
63
79
59
16
63
16
その他
css.properties.overscroll-behavior-y

overscroll-behavior-y は CSS のプロパティで、スクロール領域の垂直方向の境界に達したときのブラウザーの挙動を設定します。
63
18
59
16
63
16
CSS プロパティ
auto
63
18
59
16
63
16
contain
63
18
59
16
63
16
none
63
79
59
16
63
16
auto
63
79
59
16
63
16
contain
63
79
59
16
63
16
none
63
79
59
16
63
16
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • 「none」値は誤って「contain」として動作します（弾性バウンス効果を許可します）。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • 「none」値は誤って「contain」として動作します（弾性バウンス効果を許可します）。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • 「none」値は誤って「contain」として動作します（弾性バウンス効果を許可します）。

基本構文

CSS 
/* Prevent modal scroll chaining */
.modal {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Disable pull-to-refresh */
body {
  overscroll-behavior-y: none;
}

ライブデモ

Contain(linkprevention)

overscroll-behavior Contain(linkprevention) demo.

プレビュー全画面表示

None(bounce also prevention)

overscroll-behavior None(bounce also prevention) demo.

プレビュー全画面表示

Auto(default)

overscroll-behavior Auto(default) demo.

プレビュー全画面表示

実務での使いどころ

  • モーダル内スクロール

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

  • pull-to-refresh 無効化

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

注意点

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

アクセシビリティ

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

参考リンク