IMUZA.com

Xserver<<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で送る

最初のサイドバー

最新記事

2023/09/14

GDPRを設定する

2023/08/30

scroll-behavior:smoothは履歴に残る

2023/08/22

要素がトップにきたことを感知する-IntersectionObserver

2023/08/8

ホームページとは別に投稿一覧ページをつくる方法-WordPress

2023/07/28

WordPress:シングルページにループはいらない

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ215
  • WebTips110
  • javascript100
  • Joomla!88
  • Wordpress78
  • Windows68
  • CSS64
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google36
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com