CSSでスクロール連鎖を止めろ！

モーダルやドロワーメニューを展開し、スクロールし終わるとメインのコンテンツがスクロールすることってないでしょうか？

未だにそういったサイトを見かけます。

従来はJS でoverflow: hidden;position: fixed;を設定していましたが、今年（2022年）の9月にsafariがとあるCSSプロパティに対応したことにより、大体のブラウザでjsを使わなくても、スクロールの連鎖を止めることができるようになりました。

それは、

overscroll-behavior

参考：Can I use 

動作の参考：MDN

このプロパティを使用することによって、JSともおさらばできます。

1点気をつけることは、表示されるモーダルやメニューをスクロール可能なサイズにしないとoverscroll-behaviorが効かないため、縦幅を100%+1pxに設定すこと。

height: calc(100% + 1px);

PCの場合は、絶対スクロールがでない状況であれば、スクロールバーを消すのも1つの手です。

スマホの場合は、触らないと出てこないしスクロールバー自体が目立たないのでそのままでもOKかと思います。

どんどん便利になるCSS。
各ブラウザも対応が早く、これからどんな進化をしていくのか楽しみです。