Webサイトでポップアップなどのオーバーレイを実装し、その中でスクロールを指定するとときの問題が、わずか1行のCSSスタイルで、スマートに解決できるようになりました。
積年の恨み「WEBサイトのポップアップ背景のスクロール問題」
ある程度以上のWEBコーダーであれば、誰もが一度は経験したことのある(?)ポップアップのスクロール問題。
ポップアップなどの内部で、スクロールを指定すると、スクロール端に達すると、裏側のBODY全体がスクロールしてしまう問題。
パソコンだとそれほど気にならないですが、モバイル端末で非常にユーザ体験を損ねることがあるのです。
一度ポップアップの裏側のBODYが慣性スクロールを始めてしまうと、タッチからのイベント裏側にバインドされてしまい、慣性が完全に停止するまで、一切表側のポップアップを操作できなくなります・・。
Javascript などを駆使して、解決(緩和)をいろいろと試みることができますが、PCとモバイルで ブラウザの window の挙動が異なるなど、スマートな解決に至ることができない問題でした。
問題の解決を試みる参考ページ:
- https://coliss.com/articles/build-websites/operation/javascript/prevent-page-scrolling-when-a-modal-is-open.html
- http://nekohand.tokyo/background-fixed/
たったこれだけのことなのに、こんなにごちゃごちゃ書きたくないわけです。筆者は、長い間(勝手に)恨みをつのらせていました。
スクロールチェーンを制御する「oversroll-behavior」
これ一つで解決するようになりそうです。
.popup {
overscroll-behavior
}
スクロール操作が連結することを「scroll chain (スクロールチェーン)」というそうです。
2020/6/26 Safariが未対応
要求が強いのか 仕様は草案ステータスですが、Chrome は最新バージョンですでに対応済みです。
GoogleのDeveloperサイトに、利用事例が解説してあります。