モバイルでモーダルナビゲーションメニューを作成し、ボディスクロールを防止するにはどうすればいいですか？

Question

多くのソリューションを探してテストしましたが、まだ動作させることはできません。 Subnavigationメニュー（モーダル）を表示するとスクロールできるようにしたいが、本文は表示されないようにする。

は、私が試した：

1：JavascriptがCSSプロパティの変更は、 "固定" するモーダルオープン：

var main = document.getElementById('main'); 
main.setAttribute("style", "position: fixed;"); 

問題：あなたはモーダルを開いたときにページをスクロールしている場合は、ページ（「固定」としてもあなたはスクロールバーを持っていないことを意味し）上がる

2：Javascriptのは「オーバーフロー隠された」CSSプロパティを変更するときにモーダルオープン：

document.body.setAttribute("style", "overflow: hidden;"); 

問題：モバイルでは動作しませんが、まだスクロールしています（私はアンドロイドを使用します）。

3：Javascriptを無効にするタッチイベント：

var main = document.getElementById('main'); 
main.addEventListener('touchstart', function(e){ e.preventDefault(); }); 
main.addEventListener('scroll', function(e){ e.preventDefault();}); 
main.addEventListener('touchmove', function(e){ e.preventDefault();}); 

問題：サブナビゲーションメニューの中から触れて開始した場合を除き、作品。

が、これは私が何を意味するかをよりよく理解するために参照してください：http://i45.tinypic.com/ajl3rt.png

その後、オーバーレイメニューが表示されたときに、モバイルデバイスでボディスクロールを防ぐためにどのように？

Answer 1

私も同様の問題がありました。通常、overflow：hiddenはデスクトップ上でこれを実現します。モバイルの場合は、固定されたポジションを適用する必要があります。ダイアログがアクティブになったら、本体に「.noscroll」クラスを追加してください：

body.noscroll{ 
overflow:hidden; 
position:fixed; 
}