多くのソリューションを探してテストしましたが、まだ機能させることができません。サブナビゲーションメニュー(モーダル)が表示されたときにスクロールできるようにしたいが、本体はスクロールできない。
私は試した :
1 : モーダルを開いたときに CSS プロパティを「固定」に変更する Javascript:
var main = document.getElementById('main');
main.setAttribute("style", "position: fixed;");
問題 :モーダルを開いたときにページをスクロールすると、ページが上に移動します (「固定」とは、スクロール バーを使用できないことも意味します)。
2:モーダルを開いたときにCSSプロパティを「オーバーフロー非表示」に変更するJavascript:
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
では、オーバーレイ メニューが表示されたときにモバイル デバイスで本文がスクロールしないようにするにはどうすればよいでしょうか。