モーダルが開いている間、その下のページが連鎖してスクロールしてしまうのを回避するCSSの新しいテクニック

スクロールチェーン（スクロールの連鎖）とは、ページ上にスクロールするコンテンツ（ダイアログやモーダルなど）があり、そのコンテンツをスクロールして終点に到達するとその下のページのコンテンツもスクロールしてしまう現象です。 Chromeの次のバージョンで、この問題が数行のCSSで解決できるようになるので、紹介します。 Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーン（連鎖）とは overscroll-behaviorの問題点 スクロールチェーン（連鎖）を回避する方法 はじめに 2026年1月にリリース予定

[coliss]

CSSのoverscroll-behaviorプロパティで解決します

[RATCHO]

普通にJS使ってモーダル開いた時にbodyにoverflow:hidden付与するでいい気が

[mayumayu_nimolove]

Alpine.js使うと簡単

[MarvinParnroid]

全ブラウザ対応したら教えてください(^｡^)

[poliphilus]

今日時点ではまだ 143。次のバージョンアップかなー

[Shinwiki]

公式がダーティーハックを積み重ねてるようにしか思えんのよ。もう

[manaten]

プロジェクトのたびに対症療法しかなくもやもやしてたやつについにアンサーが

[yto]

いいね！ 他ブラウザの対応待ち

[Tack2Me]

おお、ありがてぇ