CSS:ポップアップ背景のスクロールを禁止する新しい方法「overscroll-behavior」

最終更新:2020-06-26 by Joe

Webサイトでポップアップなどのオーバーレイを実装し、その中でスクロールを指定するとときの問題が、わずか1行のCSSスタイルで、スマートに解決できるようになりました。

積年の恨み「WEBサイトのポップアップ背景のスクロール問題」

ある程度以上のWEBコーダーであれば、誰もが一度は経験したことのある(?)ポップアップのスクロール問題。

ポップアップなどの内部で、スクロールを指定すると、スクロール端に達すると、裏側のBODY全体がスクロールしてしまう問題。

パソコンだとそれほど気にならないですが、モバイル端末で非常にユーザ体験を損ねることがあるのです。

一度ポップアップの裏側のBODYが慣性スクロールを始めてしまうと、タッチからのイベント裏側にバインドされてしまい、慣性が完全に停止するまで、一切表側のポップアップを操作できなくなります・・。

Javascript などを駆使して、解決(緩和)をいろいろと試みることができますが、PCとモバイルで ブラウザの window の挙動が異なるなど、スマートな解決に至ることができない問題でした。

問題の解決を試みる参考ページ:

たったこれだけのことなのに、こんなにごちゃごちゃ書きたくないわけです。筆者は、長い間(勝手に)恨みをつのらせていました。

スクロールチェーンを制御する「oversroll-behavior」

これ一つで解決するようになりそうです。

.popup {
  overscroll-behavior

}

スクロール操作が連結することを「scroll chain (スクロールチェーン)」というそうです。

2020/6/26 Safariが未対応

要求が強いのか 仕様は草案ステータスですが、Chrome は最新バージョンですでに対応済みです。

GoogleのDeveloperサイトに、利用事例が解説してあります。