LoginSignup
23

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-07-05

スマホのナビゲーション等の実装した時、全画面であっても下までスワイプしたりすると、後ろ側の要素(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を使う

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23