ブラウザでこれ以上スクロールできない場合の挙動を制御する「overscroll-behavior」プロパティ
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を使用するときは注意が必要です。
ただ、Google ChromeやFirefoxの挙動はオフにできるので、必要な場合は指定しておくと良さそうです。
