javascript - オーバーレイdivが表示されているときにページのスクロールを停止するにはどうすればよいですか？

Question

私が作業しているページには、div（位置：固定）> div（位置：相対;幅/高さ：100％）> div（位置：絶対;左/右：50％）のモーダルレイオーバーが表示されることがあります。

モバイルデバイスとデスクトップのChrome/Safariの両方で、スワイプしてもレイオーバーの後ろのページがスクロールします。JavaScriptまたはCSSでこれを防ぐことはできますか？もしそうなら、どのようにすればよいですか？

score 3 · Accepted Answer

少なくともデスクトップブラウザでは、スクロールに関連する2つのイベントがあります：scrollとmousewheel。前者は要素がスクロールされたときに発生しますが、これは防ぐことはできません。

あなたがしようとしているのはmousewheel、オーバーレイでイベントをキャッチし、そのデフォルトのアクションを防ぐことです。あなたは次のようにJavaScriptとjQueryでそれを行うことができます：

$('#overlay').on('mousewheel', function(e) {
    e.preventDefault();
});

ただし、これはIEとFirefoxでは機能しません。ブラウザの互換性の詳細については、このページを参照してください。

モバイルブラウザでこれを行う一貫した方法はなく、OSXのタッチパッドを介してスクロールする方法もありません。

score 0 · Accepted Answer

これは真実ですが、Webアプリケーション用のモバイルデバイスもサポートするには、次を使用します。

document.ontouchstart = function(e){ 
    e.preventDefault();

}

2 に答える 2