IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / CSS / モーダルの背景のスクロールを止める

モーダルの背景のスクロールを止める

2018/04/22 CSS, WebTips

モーダルの背景のスクロールを止める

はてなブログのテーマをレスポンシブで作る際に、あれ? なぜ? と、ちょっと手間取った CSS 2題です。どちらもモバイルのメニューなど、モーダルウィンドウに関してです。

  • モーダルウィンドウがスクロールしない
  • Codepen サンプル
  • モーダルの背景のスクロールを止める(iPhoneをのぞく)
  • モーダルの背景のスクロールを止める(iPhoneの場合)

モーダルウィンドウがスクロールしない

モバイルの場合はメニューなどをモーダル、ポップアップで表示することが多いと思いますし、デスクトップでも画像をモーダルウィンドウで拡大表示したりします。

これは当サイトをモバイルで見たときの画像で、ハンバーガーメニューをクリックしモーダルウィンドウが右から出てくる途中のキャプチャーです。

で、モーダルの高さがデバイスの高さよりも長ければスクロールさせる必要があり、overflow-y: auto; を指定しますが、これだけではスクロールしません。おかしいなあ、おかしいなあといろいろやってみることしばし、わかりました。

overflow-y: auto;
height: 100%;

height も指定しないとスクロールしません。

Codepen サンプル

(注)この下に Codepen のサンプルが表示されますが、読み込みに時間がかかる場合があります。

See the Pen disable bg scroll when modal window by ausnichts (@ausnichts) on CodePen.

メニューがスクロールするようになりました。Codepenのアイコンをクリックしますと別ウィンドウで編集可能ページが開きますので、該当スタイルをコメントアウトするなりしてみてください。

ただし、iPhoneの場合はなぜかMENUアイコン自体が固定されずコンテンツと一緒にスクロールしてしまいます。これについては次項に書いています。

モーダルの背景のスクロールを止める(iPhoneをのぞく)

上のCodepenのサンプルのMENUをクリックしますとメニューがスライドしてきます。そのメニューをスクロールし下までいきますと、続いてモーダルの背景になっているコンテンツがスクロールしてしまいます。この背景のスクロールを止める方法です。

結論から言いますと、body要素に overflow: hidden; を指定すればスクロールは止まります。

サンプルでは、MENUのクリックイベントで body にクラス open を追加、あるいは削除し、モーダルウィンドウの表示非表示をコントロールしていますので、

body.open {
  overflow: hidden;
}

を指定すればモーダルウィンドウが開いたときだけ背景が固定されます。

ただし、デスクトップの場合、多分 android もこれで固定されますが、iPhoneはこれだけではなぜかうまくいきません。iPhoneの場合は次項です。

で、実は、背景を止める方法をいろいろ試しているうちに違う方法を発見しました。

html, body {
  overflow: auto;
  height: 100%;
}

としておけば、モーダル表示時に overflow:hidden; としなくても背景がスクロールしません。ただ、現在のところ、Codepen上だけで実装チェックしていませんので実際にそうなるかどうかは未チェックです。機会があれば調べてみようと思います。

いずれにしても、こんな簡単に固定できるなんて知りませんので、以前は背景に、サンプルですと content になりますが position:fixed; を指定し、それだけですと背景がトップに戻ってしまいますので、事前にスクロール量を取得しておき、モーダルを非表示にした時に再びその量だけスクロールさせることをやっていました。

モーダルの背景のスクロールを止める(iPhoneの場合)

www.imuza.com

(2018/11/7)以下の方法では止まりません。上の記事をご覧ください。

iPhoneの場合は、「iPhone で iframe を fixed にする場合の問題」でも同じような問題にぶつかっており、もうひとつはっきりしたことはわかりませんが、いずれにしてもモーダルウィンドウを表示したときの挙動がデスクトップやandroidとは異なっているようです。

まず、上のCodepenのサンプルをiPhoneで見てみますと右上のMENUアイコン(もどき)がコンテンツと一緒にスクロールしてしまいます。これがCodepen上だからなのか、多分実装では経験したことがありませんのでそうだと思いますが、これを解消するには、

html, body {
  overflow: auto;
  height: 100%;
}

を指定すれば、MENUアイコンは固定されます。ただ、やはりモーダルウィンドウをスクロールさせますと背景もスクロールしていしまいます。

で、さらに、

body.open {
  overflow: hidden;
}

を指定しますと、やっとiPhoneでも背景がスクロールされなくなります。実装であれやこれや試してみるしかなさそうです。

はてなブログ/トップページの記事固定が公式で可能に
Ubuntu17.10 デスクトップに Apache & PHP インストール
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com