2025年3月アーカイブ

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

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

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

●使い方

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

overscroll-behavior: contain;
 

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

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

●デモ

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

このアーカイブについて

このページには、2025年3月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2024年11月です。

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