6

多くのソリューションを探してテストしましたが、まだ機能させることができません。サブナビゲーションメニュー(モーダル)が表示されたときにスクロールできるようにしたいが、本体はスクロールできない。

私は試した :

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

では、オーバーレイ メニューが表示されたときにモバイル デバイスで本文がスクロールしないようにするにはどうすればよいでしょうか。

4

1 に答える 1