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には対応しているので
注意しながら実装してみてください。