【これで解消】「overscroll-behavior」プロパテを使ってブラウザがこれ以上スクロールできない場合の挙動を制御する

iPhoneやMacなどのブラウザでサイトを確認しているときに、
これ以上スクロールできないところまでスクロールした際に、画面が伸びて指を離すと跳ね返るような挙動を
経験したことありませんか?

私はこれがサイト制作時に気になっていました。
なんとか解消する方法はないか?と検索していたところ、CSSで制御できる方法を発見!
残念ながら現状safariでは使用できないようなのですが、それ以外のブラウザでは使用することが可能なようですので
その方法をご紹介します。

overscroll-behavior

body {
 overscroll-behavior: auto;
}

body {
 overscroll-behavior: contain;
}

body {
 overscroll-behavior: none;
}

値としては上記の3種類。
overscroll-behavior-xとoverscroll-behavior-yもあるため、
横方向のみと縦方向のみを制限することができます。

①auto
autoはデフォルト値になります。
各ブラウザの初期値の挙動に沿う形です。

②contain
スクロール要素の外にはみ出さないよう処理します。

③none
スクロール要素の外にはみ出さないよう処理します。
なおかつ、指を離すと跳ね返るような挙動もなくなります。
基本的にはこのnoneを設定しておくといいでしょう。

残念なのがsafariに対応していないこと。
早く対応してくれると嬉しいですが、GooglechromeやFirefoxには対応しているので
注意しながら実装してみてください。