スマホメニューが開いたときにうしろのコンテンツがスクロールすることよくありますよね。
HTMLタグやbodyタグにclassを付与してCSSで調整することもできるんですが、なぜかページトップへ戻ってしまう現象が発生したので、それを発生させない方法をご紹介します。

エンジニアさんが書いてくれました✨

下記は「headerBtn」というスマホメニューのボタンをクリックすると
htmlタグに「menu-opened」というクラスが付与されます。
ここまではよくお話。

document.querySelector('.headerBtn').addEventListener('click', function () {
  html.classList.toggle('menu-opened'); // ハンバーガーメニュートグル
  toggleScrollProp();
});

「menu-opened」がhtmlに付与されているときはタッチができないようにしてます。
すなわち、これスマホのメニューが長い時は使えません笑
ご注意ください！

function toggleScrollProp() {
  const isDisableScroll = html.classList.contains('menu-opened');
  if (isDisableScroll) {
    html.addEventListener('touchmove', disableEvent, { passive: false });
    html.addEventListener('wheel', disableEvent, { passive: false });
  } else {
    html.removeEventListener('touchmove', disableEvent, { passive: false });
    html.removeEventListener('wheel', disableEvent, { passive: false });
  }
}

function disableEvent(e) {
  e.preventDefault();
}

一画面で収まるデザインのときは活用できるのと思うのでぜひ参考にしてみてくださいね。

• code,
• css3,
• javascript,
• web