ハンバーガーメニューを開くと背景を固定し、メニューの中だけはスクロール可能にする

Question

実現したいこと

掲題の通りですが、以下となります。
①ハンバーガーメニューをクリック(下記ソースのid="drawerTrigger"が付与されたbutton要素)
②上記をトリガーに、id="drawerMenu"が付与されたdivタグが開く。メニューがトグルで開くような形です。
一般的なハンバーガーメニューの挙動イメージで相違ありません。

③①と同時に、背景はスクロール出来なくする。つまりメニューの中では、メニューだけがスクロールできるようにする。

Webサイトによくあるハンバーガーメニューになりますが、PCのブラウザでは動作するが、スマートフォンの実機だとうまく動作しないという状態です。

興味深い点が以下です
・スマートフォン(iphone12 / ブラウザSafari)でメニューを開いた際、メニューの中でスクロールは2本指であれば動く。
一本指で普通にスクロールすると反応しない。(Google Chromeであっても同様です)
・pcのマウスであれば問題なくスクロールできるし、背景も動かない。(Google Chrome検証ツール等では動くという意味です)

具体的なソースコード

HTML(WPのためPHP関数が含まれます、該当する部分のみになります)

<div class="l-header__drawer" id="drawerMenu">
  <div class="l-header__drawer-inner">
    <?php
      $hamburger_menu_top_args = array(
        'theme_location' => 'hamburger_menu_top',
        'menu_class' => 'l-header__drawer-main-list',
        'container'       => '',
        'items_wrap'      => '<ul class="%2$s">%3$s</ul>',
        'add_li_class' => 'l-header__drawer-main-item',
        'depth' => 1,
      );
      wp_nav_menu($hamburger_menu_top_args);
    ?>

    <?php
      $hamburger_menu_bottom_args = array(
        'theme_location' => 'hamburger_menu_bottom',
        'menu_class' => 'l-header__drawer-sub-list',
        'container'       => '',
        'items_wrap'      => '<ul class="%2$s">%3$s</ul>',
        'add_li_class' => 'l-header__drawer-sub-item',
        'depth' => 1,
      );
      wp_nav_menu($hamburger_menu_bottom_args);
    ?>

    <a href="<?php echo esc_url( home_url( '/contact/' ) ); ?>" class="l-header__drawer-button">
      <div>
        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/icon/icon_email.jpg" class="l-header__drawer-button-icon">
        <p class="l-header__drawer-button-text">Contact</p>
      </div>
    </a>
  </div>
</div>

CSS
ハンバーガーメニューをクリックしたら開くメニューのcssの部分です。特に.l-header__drawer-innerのスタイルが該当するかと思います。
.l-header__drawer-innerはドロワーメニューの中のインナーの役割となります。

/ * ここからがドロワーメニュー * /
.l-header__drawer {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0) linear-gradient(179deg, #009fdc 0%, #002d78 100%) 0% 0% no-repeat padding-box;
  transition: 0.4s;
}
.l-header__drawer.active {
  opacity: 1;
  visibility: visible;
}
.l-header__drawer-inner {
  overflow-y: auto;
  max-height: 100vh;
  padding: 90px 0;
}

JS
JSにおいては、別途</body>の上で

<script src="https://cdnjs.cloudflare.com/ajax/libs/body-scroll-lock/3.1.5/bodyScrollLock.min.js"></script>

を読み込んでいます。
これは背景スクロールをロックするものであり、おそらくここもスクロールロックに関わっていると思います。(というか犯人？)

参考
https://qiita.com/Naughty1029/items/a3e20a47094f6eb7bf7b

const drawerTrigger = document.getElementById("drawerTrigger");
const drawerMenu = document.getElementById("drawerMenu");
// ドロワーメニューのトリガー
function setupDrawerTrigger() {
  if (drawerTrigger && drawerMenu) {
    drawerTrigger.addEventListener("click", function () {
      this.classList.toggle("active");
      drawerMenu.classList.toggle("active");
      if (drawerMenu.classList.contains("active")) {
        bodyScrollLock.disableBodyScroll(drawerMenu);
      } else {
        bodyScrollLock.clearAllBodyScrollLocks();
      }
    });
  } else {
    console.warn('No element found with id "drawerTrigger" or "drawerMenu".');
  }
}

試したこと

・.l-header__drawer-innerに対してoverflow-y: auto;をoverflow: scroll;に変更
・bodyScrollLock.min.jsの読み込み解除、しかしそれはそれで背景が動いてしまうし、iOS環境環境だとbodyタグに対してover-flow:hiddenをかけるハックが効かない

補足情報（FW/ツールのバージョンなど）

検証環境(スマホ実機)
・iOS(iPhone12)
・ブラウザ Safari / Google Chrome

Answer 1

大変申し訳ございませんでした。結論から言うと上記のJSは謎に関数化されていたこと、そして関数が実行されていなかったこと。

あとおそらくここが問題で、以下のようにJSを書き換えました。つまり最初はbodyScrollLock.disableBodyScroll(drawerMenu);と書いてましたがスクロールさせたいのはそのインナーだったので、新たにIDを取得し、再度書き直すことでうまくいきました。

正しくは以下が正解↓
bodyScrollLock.disableBodyScroll(drawerMenuInner);

// ドロワーメニューのトリガー
const drawerTrigger = document.getElementById("drawerTrigger");
const drawerMenu = document.getElementById("drawerMenu");
const drawerMenuInner = document.getElementById("drawerMenuInner");

if (drawerTrigger && drawerMenu) {
  drawerTrigger.addEventListener("click", function () {
    this.classList.toggle("active");
    drawerMenu.classList.toggle("active");
    if (drawerMenu.classList.contains("active")) {
      bodyScrollLock.disableBodyScroll(drawerMenuInner);
    } else {
      bodyScrollLock.clearAllBodyScrollLocks();
    }
  });
}