CSS

スマホメニューなどモーダルウィンドー背後のコンテンツのスクロールを止める

2017.10.18

ウィンドウ

スマホメニューはじめコンテンツ上にモーダルウィンドウを展開する時に、背後のコンテンツのスクロールに頭をなやませます。PCではうまく行くのにiOSでうまくいかないとかiOSでうまくいかないとかがあります!

背後のコンテンツのスクロールを止める方法はいくつかありますので、その中でも比較的シンプルな方法を備忘録を兼ねて紹介します。

jQueryとCSSで実装する

スマホメニューを想定しています。仕組みとしては、メニューボタンを押すと、bodyaddClassで下記のスクロールを止めるためのクラスが付与され、フェードインでメニューがコンテンツの上に展開し、もう一度ボタンを押すとremoveClassでスクロール停止のクラスが解除されメニューもフェードアウトする仕組みです。

.fixbody {
  width: 100%;
  height: 100%;
  position: fixed;
}

js部分です。当サイトのスマホメニューもこちらの仕組みで動いています。

var _touch = ('ontouchstart' in document) ? 'touchstart' : 'click';
jQuery(function(){
  var state = false;
  var scrollpos;
  var navBox = $('メニュー本体');
  var navBtn = $('ボタン');

  navBtn.on(_touch,function () {
    if(state == false) {
      scrollpos = $(window).scrollTop();
      $('body').addClass('fixbody').css({'top': -scrollpos});
      navBox.fadeToggle(500,"linear");
      state = true;
    } else {
      $('body').removeClass('fixbody').css({'top': 0});
      window.scrollTo( 0 , scrollpos );
      navBox.fadeToggle(500,"linear");
      state = false;
    }
  });
});

fixedでスクロールを止めるとページの先頭へ移動するので、スクロール量を取得し現在の位置へ戻します。

ヘッダーを固定すると挙動が不安定になる

ヘッダーをfixedで固定している場合、なぜかヘッダーがどこかへ行ってしまわれる現象に遭遇しました。メニューの中に同じヘッダーを作って回避するなど、色々対策方法を考えましたが、どれも力技って感じでなので別の方法を考えます。

overflow: hidden;でスクロールを止める

fixedの他にoverflow: hidden;でスクロールを止める方法があります。

.fixbody {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

iOSでスクロールしてしまうので、厳密には完全に止まっているわけではありませんが、スクロール量を取得して現在位置に戻すため、メニューを閉じた時には開いた位置に戻っています。

半透明のメニューだと不恰好になりますが、UI的に半透明メニューのトレンドは過ぎた気がしますので、個人的にはこの方法で良いのかなぁ〜と思っています。

とりあえずヘッダーを固定する場合はhidden固定しない場合はfixedで運用してみようと思います。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する