Edited at

スマホで全画面モーダルを展開したときに後ろの要素を固定する

More than 3 years have passed since last update.

スマホのナビゲーション等の実装した時、全画面であっても下までスワイプしたりすると、後ろ側の要素(bodyやwrapperなど)まで動いてしまうのを止めたくて調べてみました。


1. overflow: hidden

一番てっとり早いがiOSではスクロールを止めることは出来ない


2.タッチイベントを停止

http://qiita.com/kokushin/items/ef96194bd0fa7c145d7b

この辺や


//スクロール禁止用関数
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 + スクロール位置を記憶

http://qiita.com/gonshi_com/items/5a86fc415dcccfb04e2a#comment-475a95b4b8d993098233

ちょっと大げさだけど、手堅くいける気がする。

気になるのはfixedにしたときにスクロールで隠れたブラウザUIがまた出てくることくらいかな。


結論

2か3を使う