クライアントから「PCのハンバーガーメニューの中身がスクロールできない」という不具合の修正依頼が来ました。自分が作ったサイトではなく、既存サイトの保守として入ったケースです。
全画面固定のオーバーレイ型メニューで、画面の高さが狭い場合にメニュー内がスクロールしてほしいのに、まったく動かないという状態です。
あーこれあるあるだな、と思いつつ原因を探り始めたのですが、これがなかなか見つかりませんでした。
Claudeと壁打ちしながら調べていたのですが、よくある原因(position: fixed のz-indexとか、親要素の overflow とか)として提案された内容を一通り確認しても糸口が見えませんでした。
(というかそんなのは最初に見てる・・・)
ふと html タグを見ると、lenis lenis-smooth というクラスが付いていました。
原因は、Lenisというライブラリでした。
Lenisは慣性スクロール(ぬるっとしたアニメーション付きのスクロール)を実装するライブラリです。ブラウザのネイティブなスクロール挙動をJSで丸ごと乗っ取る仕組みになっているので、position: fixed の全画面メニュー内のスクロールイベントもLenisに吸われてしまっていたみたいです。
修正としては data-lenis-prevent をメニュー要素に付与するだけ。「この要素の中はLenisは手を出さないでね」という指定です。これで即座に直りました。
また似たような問題が起きたときに思い出せるようにメモしておきます。