lenis.jsでposition:fixed要素のoverflow:scrollを効かせる

はじめに

慣性スクロールを手軽に実装できる、Lenis.jsを使っているサイトでモーダルを作成した際、position:fixed要素のoverflow:scrollが効かない時の対処法です。

解決方法

1. スクロール要素に onwheel="event.stopPropagation()"を追加

<div class="fixed" onwheel="event.stopPropagation()">

2. jsでwheelイベント伝播を停止

const modal = document.querySelector('#cc-main')
modal.addEventListener('wheel',(e)=>{
  e.stopPropagation()
})

をjsに追加すれば解決します。

参考元

https://github.com/studio-freight/lenis/issues/14