ホームページ制作・システム構築なら
株式会社Omit

慣性スクロールとposition:fixed要素のスクロール問題

簡単に慣性スクロールを実現できるライブラリ「lenis.js」を使用してウェブサイト制作をしていた際、一つの問題に直面しました。

ハンバーガーメニューやモーダルウィンドウなど、一時的にposition:fixed;で固定した要素内でoverflow:scroll;を適用しようとすると、挙動が不安定になることが分かりました。

この問題は、HTMLタグにlenis.jsのスクロール属性が影響しているため、固定要素内のスクロールがうまく機能しないことが原因と考えられます。

しかし、スクロールさせたい要素にたった1行追加するだけで解決することができたので、覚書としてブログに残しておこうと思います。

同じ状況でつまずいている方のお役に立てたら嬉しいです。

スクロール要素に属性を追加する

スクロールさせたい要素にonwheel="event.stopPropagation()"を追加します。

//素の要素に…
<divclass="scroll_box"></div>
↓
//属性追加！
<divclass="scroll_box"onwheel="event.stopPropagation()"></div>

たったこれだけで解決できます！

まとめ

この簡単な解決策を使えば、lenis.jsを使用した際のスクロール問題を回避できます。ぜひ試してみてください！