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

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

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

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

●使い方

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

overscroll-behavior: contain;
 

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

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

●デモ

https://blog.gravity-works.jp/css_blog/demo/overscroll_behavior/

このブログ記事について

このページは、gravity-worksが2025年3月13日 14:57に書いたブログ記事です。

ひとつ前のブログ記事は「外部SVGファイルの色をCSSで変更する」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。