lenisとmmenuを共存させる

lenisで慣性スクロールを実装していたのですが、mmenuでメニューを展開したときスクロールが無効になっていることに気が付きました。あれこれやってみましたがスクロールは無効なまま、それでも粘り強く検索した結果下記のエントリーにたどり着き無事解決できました。

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

#menu要素に対してwheelイベントの伝搬を停止したかったので下記のように書きました。

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

ついでにサイドメニューボタンをクリックしたときメインコンテンツのスクロールを停止、サイドメニューを閉じたときにスクロールを再開するようにしてみました。

document.addEventListener('DOMContentLoaded', function() {
//サイドメニュークリック時
      const buttonMenu = document.querySelector('.button__menu');
      buttonMenu.addEventListener('click', function() {
        if (lenis) {
            lenis.stop();
        }
      });
//サイドメニュー閉じるクリック時
      const closeArea = document.querySelector('.mm-blocker');
      closeArea.addEventListener('click', function() {
        if (lenis) {
            lenis.start();
        }
      });
    });

さらについでに、UAを取得してPCからアクセスしたときにLenisを有効化するようにしました。（スマートフォン、タブレットからのアクセス時は動作させない）

// ユーザーエージェントを取得
const userAgent = navigator.userAgent;

// PCであるかどうかを判定する正規表現
const pcRegex = /Windows NT|Macintosh/;

// PCからのアクセスであるかどうかを判定
const isPC = pcRegex.test(userAgent);

// PCからのアクセスの場合のみLenisを有効化
if (isPC) {
}

コードをまとめるとこんな感じ。

<script>
// ユーザーエージェントを取得
const userAgent = navigator.userAgent;

// PCであるかどうかを判定する正規表現
const pcRegex = /Windows NT|Macintosh/;

// PCからのアクセスであるかどうかを判定
const isPC = pcRegex.test(userAgent);

// PCからのアクセスの場合のみLenisを有効化
if (isPC) {
    // Lenisの初期化とアニメーションの実行
    const lenis = new Lenis();
    function raf(time) {
        lenis.raf(time);
        requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);

    // スライドメニューのoverflow:scrollを効かせるためのおまじない
    const modal = document.querySelector('#menu');
    modal.addEventListener('wheel', (e) => {
        e.stopPropagation();
    });

    // DOMの読み込みが完了したら実行
    document.addEventListener('DOMContentLoaded', function() {
        // サイドメニューボタンクリック時
        const buttonMenu = document.querySelector('.button__menu');
        buttonMenu.addEventListener('click', function() {
            // lenisが定義されていれば、stop()を実行
            if (lenis) {
                lenis.stop();
            }
        });

        // メニューを閉じる領域クリック時
        const closeArea = document.querySelector('.mm-blocker');
        closeArea.addEventListener('click', function() {
            // lenisが定義されていれば、start()を実行
            if (lenis) {
                lenis.start();
            }
        });
    });
} 

  </script>

実際このサイトに実装しているので、右下の「menu」ボタンをクリックしてみてください。（デザイン変わったらごめんなさい。）