モーダルウインドウの背景を上下にスクロールしないようにする方法

半年以内

CSSだけでできないかと試行錯誤したのですが、iOSのSafariでどうしても挙動が安定しなかったので、とうとうJavaScriptで実装することにしました(ちょっと悔しい)。そのメモです。

基本的な考え方

  1. 背景が固定された状態(position : fixed状態)のスタイルを作っておく
  2. モーダルの表示/非表示と、背景固定のオン/オフをJSで連動させる
  3. モーダルを表示する際に、現在のスクロール位置をJSで取得してCSSに渡す

という感じでがんばります。

HTML

  • モーダルウインドウを開く要素に、例えば class=”menuOpner” とクラスをつけておく
  • モーダルウインドウを閉じる要素に、例えば class=”menuCloser” とクラスをつけておく

CSS

背景が固定されている状態のスタイルを定義しておきます。

body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}

これで、body要素に class=”fixed” をつけたり外したりすることで、背景固定のオン/オフが制御されます。
ただし上下スクロール位置はJSで取得するので、CSSでは書いていません。

なお、モーダルウインドウ自体のスタイルはここでは省略しています。

JavaScript

$(function(){
	var scrollPosition;
	$(".modalOpner").on("click", function() {
		scrollPosition = $(window).scrollTop();
		$('body').addClass('fixed').css({'top': -scrollPosition});
	});
	$(".modalCloser").on("click", function() {
		$('body').removeClass('fixed').css({'top': 0});
		window.scrollTo( 0 , scrollPosition );
	});
});

モーダルウインドウを表示させる要素 class=”modalOpener” がクリックされると、

  • その時点でのスクロール位置を取得し、
  • body に class=”fixed” をつけ、
  • body のtopプロパティにスクロール量を渡す

という処理を行います。

その結果、htmlがこうなればよいわけです。

<body style="top: -740px;" class="fixed">

もちろんですが、モーダルウインドウを非表示にする要素 class=”modalCloser” がクリックされると逆のことをします。

参考文献

サマソニのサイトの実装を参考にしました。
SUMMER SONIC TOKYO LINEUP – SUMMER SONIC 2019

コメント

コメントをどうぞ(承認後に反映されます)




コメント