iOSで要素内をスクロールした際、ページ本体にスクロール対象が移ってしまうのを防ぐCSS

iOSでは要素内でのスクロールを端まで行った後、続けてスクロールしようとするとスクロール対象がページ本体に移ってしまいます。

ハンバーガーナビやモーダルなどfixedさせている要素でこれが起こってしまうと都合が悪いのですが、対策するにはJSなどを使ってやや面倒な処理をする必要がありました。

しかし、iOS16（2022年9月～）からは「overscroll-behavior」が使えるようになったことで簡単に解決できるようになりました。

●使い方

overflow-y などを指定している要素に以下を指定。

overscroll-behavior: contain;

注意点として、内容が短くてスクロールが発生しない場合は有効になりません。

その場合は内容を1pxだけはみ出るような高さに設定することで有効にできます。

●デモ