iOSでドロワーを開いた際にコンテンツ側のスクロールを無効にしたい。

Question

iOS11や10などで、ドロワーを開いた際はコンテンツ側はドロワーの下に隠れるようになりますが、コンテンツ側もスクロールできてしまいます。
ドロワーを開いた際にコンテンツ上にバックドロップを敷くと、コンテンツのリンクなどは触れなくできますが、スクロールは相変わらず有効のままです。
ドロワー内でスクロールさせているときに、コンテンツ側がスクロールできてしまって、ドロワー内のスクロールが不安定になるときもあります。
ドロワーを開いた際に、 html { overflow:hidden; }を指定してやると、Androidではコンテンツ側のスクロールが無効になるのですが、iOSではそうはいかないようです。
そこでググってみたところ、以下の方法で試してみたのですが、相変わらずコンテンツ側はスクロールできしてしまいます…。

$(function () {
 var menuBtn = $('.menu-btn');
 var rootHtml = $('html');
 var flagBtn = false;
 menuBtn.on('click', function () {
    if (flagBtn) {
      menuBtn.attr('aria-expanded', 'false'); // ドロワーの開閉
      rootHtml.on('touchmove.noScroll', function(e) {
      　e.preventDefault();
      });
      flagBtn = false;
    } else {
      menuBtn.attr('aria-expanded', 'true'); // ドロワーの開閉
      rootHtml.off('.noScroll');
      flagBtn = true;
    }
 });
});

touchmoveが関係しているようですが、どなたか解決法をご教授いただければと思います。
よろしくお願いいたします。

Answer 1

自分はよくこの手法を用います

$(window).on('touchmove', function(e) {
	if($('.noScroll').length > 0){//クラスは適宜変更
		e.preventDefault();
	}
});

参考URL
https://qiita.com/mimoe/items/f5f668cebb697d073553

Comments

[aurized]

なるほど、試してみました。
結果、状況は変わらなかったです…。
何か他に要因があるのかもしれません。
ご回答ありがとうございました。

Answer 2

<div id="contents">
  <p>
    <button onclick="baa();">open</button>content</p>
</div>
<div id="foo" class="wrap">
  <div class="inner">
    drawer_content
    <button onclick="baz();">close</button>
  </div>
</div>

html,
body {
  margin : 0;
}
#contents {
  border : 1px solid #cccccc;
  box-sizing : border-box;
  width: 100%;
  overflow : auto;
}
#contents p {
  padding: 200px 0 100vh;
}
#foo {
  position: fixed;
  display: block;
  top:0;
  left:0;
  width: 100%;
  min-height: 100%;
  background-color: rgba(0,0,0,.5);
  overflow: auto;
}
#foo:not(.active) {
  display: none;
}
.inner {
  position: absolute;
  background-color: #ffffff;
  margin: 1em;
  border-radius: 10px;
  padding: 100px 0 100vh;
  width: 200px;
}

var qux,quux,quuux;
$(window).on('load scroll',function(){
  qux = window.innerHeight;
  quux = $(this).scrollTop();
  $('html').css('min-height',qux+'px');
});
function baa(){ // 開く
  $('#foo').addClass('active');
  $('#contents').css('position','fixed');
  quuux = quux;
  $('#contents').css('top','-'+quux+'px');
 }
function baz(){ // 閉じる
  $('#foo').removeClass('active');
  $('#contents').css('position','');
  $('#contents').css('top','');
  $(window).scrollTop(quuux);
}

開閉方法や、構造を見直さないといけないかもしれませんがこんな感じでどうでしょう。