iOSでは要素内でのスクロールを端まで行った後、続けてスクロールしようとするとスクロール対象がページ本体に移ってしまいます。
ハンバーガーナビやモーダルなどfixedさせている要素でこれが起こってしまうと都合が悪いのですが、対策するにはJSなどを使ってやや面倒な処理をする必要がありました。
しかし、iOS16(2022年9月~)からは「overscroll-behavior」が使えるようになったことで簡単に解決できるようになりました。
●使い方
overflow-y などを指定している要素に以下を指定。
overscroll-behavior: contain;
注意点として、内容が短くてスクロールが発生しない場合は有効になりません。
その場合は内容を1pxだけはみ出るような高さに設定することで有効にできます。
●デモ
https://blog.gravity-works.jp/css_blog/demo/overscroll_behavior/