lenisで慣性スクロールを実装していたのですが、mmenuでメニューを展開したときスクロールが無効になっていることに気が付きました。あれこれやってみましたがスクロールは無効なまま、それでも粘り強く検索した結果下記のエントリーにたどり着き無事解決できました。
#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」ボタンをクリックしてみてください。(デザイン変わったらごめんなさい。)