制作・見積り依頼(無料)

Blogブログ

ブログのイメージ

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

Coding2022.10.31 : Yamamoto Naoki

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

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

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

お仕事のご依頼やご相談は下記より
お気軽にお問い合わせください

Tel.089-961-4166(平日 9:00〜18:00/土日祝休業)