ブログ

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

2022.10.31 : Yamamoto Naoki
Coding

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

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

従来は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。
各ブラウザも対応が早く、これからどんな進化をしていくのか楽しみです。

アーカイブ

資料ダウンロード 制作依頼・ご相談
イメージ:制作依頼・ご相談
イメージ:制作依頼・ご相談