スマホのナビゲーション等の実装した時、全画面であっても下までスワイプしたりすると、後ろ側の要素(bodyやwrapperなど)まで動いてしまうのを止めたくて調べてみました。
1. overflow: hidden
一番てっとり早いがiOSではスクロールを止めることは出来ない
2.タッチイベントを停止
この辺や
//スクロール禁止用関数
function no_scroll(){
//PC用
var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).on(scroll_event,function(e){e.preventDefault();});
//SP用
$(document).on('touchmove.noScroll', function(e) {e.preventDefault();});
}
こんなのとか。
スマートで楽なので、ほぼこれで良い気もするけど、問題点としてモーダル内にスクロール(iframeやjs擬似スクロール)があると、それも動かなくなってしまう。
https://github.com/noraesae/perfect-scrollbar
これ系のjsとか
3. position:fixed + スクロール位置を記憶
ちょっと大げさだけど、手堅くいける気がする。
気になるのはfixedにしたときにスクロールで隠れたブラウザUIがまた出てくることくらいかな。
結論
2か3を使う