# ブラウザでこれ以上スクロールできない場合の挙動を制御する「overscroll-behavior」プロパティ

URL: https://webrandum.net/css-overscroll-behavior/
公開日: 2020-03-08
更新日: 2020-04-05
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

Macのブラウザでこれ以上スクロールできない場所までスクロールしたのに、そこからさらに先へスクロールしようとすると画面が伸びて指を離すと跳ね返るような挙動になります。

要は「これ以上スクロールできませんよ」とユーザーに知らせるためのインタラクションです。

他にも左右にスワイプしたときにスマホの場合は「戻る」「進む」の挙動になるブラウザがあります。

このようなスマホブラウザ特有のスワイプ関連の機能は、デザインや作成したい機能によってオフにしたい場合があります（ウェブサイトというより、ウェブサービスの実装の場合は特に多いです）。

現状Safariには使えませんが、それ以外のブラウザでは使えるのが`overscroll-behavior`です。

## overscroll-behavior

overscroll-behaviorは「auto」「contain」「none」の3種類の値があります。

| 値 | 内容 |
| --- | --- |

| auto | デフォルト値。ブラウザの挙動に任せる |
| --- | --- |

| contain | スクロール要素の外にはみ出さないようにする |
| --- | --- |

| none | スクロール要素の外にはみ出さないようにしつつ、 画面が伸びて指を離すと跳ね返るような挙動もオフになる |
| --- | --- |

基本はautoかnoneかどっちかで良さそうです。派生プロパティ

`overscroll-behavior-x`と`overscroll-behavior-y`もあり、横方向のみと縦方向のみを制限できます。

左右にスワイプしたときの「戻る」「進む」動作は残しつつ、縦に伸ばしたときのスクロール効果だけ制御したいときに使えます。

## 対応ブラウザ

残念ながらSafariに対応していないのが現状です。

iPhoneユーザーの多くはSafariを使っていますし、SNSからリンクを開くとSafariで開かれてしまうので、`overscroll-behavior`を使用するときは注意が必要です。

[![Data on support for the css-overscroll-behavior feature across the major browsers from caniuse.com](https://caniuse.bitsofco.de/image/css-overscroll-behavior.png)](http://caniuse.com/#feat=css-overscroll-behavior)

ただ、Google ChromeやFirefoxの挙動はオフにできるので、必要な場合は指定しておくと良さそうです。