drawerのスマホメニューのスクロールの動きがおかしくなったのを解決した方法とは？！

スマホメニューを作るときに一番便利でお洒落な感じのDrawer.jsですが

今まで何年も問題なく動いていたのに、
ここ数日、何の前触れもなく、

ハンバーガーメニューボタンを押してヨコからするっとメニューが出てくるまではいいのですが、
そこからメニュー内でスクロールさせようとして

指でスクロールしようとすると、
何故か、背景のページが動き、メニューないではスクロールせず、

ちょこっとスクロールさせようとしたら、
メニューがすぐに引っ込んでしまうという奇妙奇天烈な現象がおきた。。

な、な、な

なんで～

何が原因？？

今までちゃんとうごいていたのに～

というわけで

相当悩みましたが結論としては解決しました。

それは、以下のような＜nav＞の間に＜div class=”inner”＞をかませてCSSをあてることで解決しました。

具体的に言うと、
↓こんな状態の部分を

<!-- スマホメニューdrawer -->
<div class="visible_xs_block">
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
<p>MENU</p>
</button>
<nav class="drawer-nav" role="navigation">
<?php wp_nav_menu(array('theme_location'  => 'smh_head_navi',)); ?>
</nav>
</div>
<!-- スマホメニューdrawer -->

↓こんな感じでinnerでメニューを挟む

<!-- スマホメニューdrawer -->
<div class="visible_xs_block">
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
<p>MENU</p>
</button>
<nav class="drawer-nav" role="navigation">
<div class="inner">
<?php wp_nav_menu(array('theme_location'  => 'smh_head_navi',)); ?>
</div>
</nav>
</div>
<!-- スマホメニューdrawer -->

そして、以下をCSSに追加します。

nav .inner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

これで解決しました！！

以下のようなサイトを参考にしました。
https://qiita.com/n4o847/items/c491c040f40809325394

※最初はこれ↓を見てinnerではさむまではわかったのですが、

【解決】Drawer.jsでiScrollが動かなかった件

何かスタイルを当てるんだろうけど、書いていなかったので
いろんなキーワードで調べまくっているうちに、
↓こちらをみつけて、
https://qiita.com/n4o847/items/c491c040f40809325394

２つの情報をあわせたら解決しました。

もし自分のような状況に方の解決のお役に立てればうれしいです！！（＾＾）/

p.s. ちなみにハンバーガーメニューボタンは position: fixed;　になっている場合に、今回の現象は当てはまります。

.drawer-hamburger {
    position: fixed;
}