IMUZA.com

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

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

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

2018/06/12 CSS, javascript, WebTips

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

以前の記事「モーダルの背景のスクロールを止める」

上の記事で、メニューなどをモーダルで出す場合に背景のスクロールを止める方法を書いたのですが、やはり、iPhone 実機ではうまくいきません。再度挑戦です。

  • iPhone(iOS?)以外の場合
  • iPhone の場合

iPhone(iOS?)以外の場合

iPhone 以外は上の記事で問題ないと思います。モーダルを開いた時に body に open などのクラスを追加します。たとえば、

document.getElementById('トリガー要素のid').addEventListener('click', function(){
  document.body.classList.toggle('open')
});

として、CSS で

body.open {
  overflow: hidden;
}

とすれば止まります。

今回の件でいろいろググってみたところ、height: 100%; や html { overflow: hidden;} が必要との記事が多かったのですが、私の環境では必要ありませんでした。いろいろ試してみるのが一番ですね。

iPhone の場合

iPhone しか持っていませんので、iOS 共通のことがどうかわかりません。おそらくそうだとは思いますが、iPhone 上の Safari と Chrome でのチェックのみです。

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

上の以前の記事の方法では問題が発生します。モーダルを表示しない通常のコンテンツでのスクロールがうまくいきません。一応スクロールはするのですが、いわゆるヌルヌル感がなくなります。

で、いろいろググりましたら、 preventDefault() を使うという記事があり、なるほどということでやってみたのですが、当然ながら、これを使いますとモーダルのスクロールまで止まってしまいます。

こういう方法を考えてみました。

結局、背景がスクロールしてしまうのは、モーダルがもうこれ以上スクロールできない状態の時に背景がスクロールするわけですから、モーダルが一番上や一番下までスクロールしたら、もうそれ以上スクロールしないようにすればいいわけです。ですので、モーダルが一番下までスクロールされたら、preventDefault() でイベントをキャンセルし、そのままではキャンセルされたままになってしまいますので 1px だけスクロールさせキャンセルを解除します。一番上までスクロールしたときも同様にします。

モーダル表示のトリガーが関数 togglemodal() を呼ぶとして、

function togglemodal() {
    if(!document.body.classList.contains('open')){
        document.body.classList.add('open');


        var elem = document.getElementById('モーダルのid');
        elem.addEventListener('touchmove', function(e) {
            var scroll = elem.scrollTop;
            var range = elem.scrollHeight - elem.offsetHeight - 1;
            if (scroll < 1) {
                e.preventDefault();
                elem.scrollTop = 1;
            } else if(scroll > range) {
                e.preventDefault();
                elem.scrollTop = range;
            }
        });


    } else {
        document.body.classList.remove('open');
    }
}

(2019.4.17)以下のように IPhone で切り分けないと Android ではスクロールしなくなるようです。

if(navigator.userAgent.indexOf('iPhone') !== -1){
}
// または
if(navigator.userAgent.indexOf('iPhone') !== -1 || navigator.userAgent.indexOf('iPad') !== -1){
}

これで、iPhone 実機でもうまくいっています。

Ubuntu を 18.04 LTS にアップグレードした
(bug fix)はてなブログ「一覧形式」の画像をオリジナルのものに変える
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

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

Another Sites

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

Contact Us

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

Copyright © 2022 · IMUZA.com