前提・実現したいこと
モーダルウィンドウを出して、その中のテキストをスクロールしようとすると、背景(body)が動いてしまいます。
モーダルが開いているときは、固定したいです。
PC、Androidは問題ないのですが、iOS11,10が動いてしまいます。
参考サイトをいろいろみましたが、iOSの仕様が変わったせいか、overflow: hidden;がきかなかったり、
背景固定で紹介しているサイトでも現在は動いてしまうものが多く、実現したいものが見つけられませんでした。
下記のサイトがわかりやすかったので、ここをベースにして背景固定にしたいですが、可能でしょうか。
http://cly7796.net/wp/smartphone/prevent-scrolling-with-ios/
該当のソースコード
<header class="header">ヘッダー</header> <div class="contents"> <p>コンテンツ本文コンテンツ本文コンテンツ本文コンテンツ本文</p> <p>コンテンツ本文<button class="modal-link" data-modaibody="modal01">モーダル01</button>コンテンツ本文コンテンツ本文コンテンツ本文</p> ~略~ <p>コンテンツ本文コンテンツ本文コンテンツ本文コンテンツ本文</p> </div> <footer class="footer">フッター</footer> <div class="modal-bg"></div> <div class="modal-contents"> <button class="modal-close">閉じる</button> <div class="modal-scroll"> <div id="modal01" class="modal-body"> <p>モーダル01の中身です。</p> </div> <div id="modal02" class="modal-body"> <p>モーダル02の中身です。</p> ~略~ <p>モーダル02の中身です。</p> </div> </div> </div>
html.is-fixed, html.is-fixed body { height: 100%; overflow: hidden; } .modal-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); } .modal-bg.is-show { display: block; } .modal-contents { display: none; position: fixed; top: 50%; left: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%); background: #ffffff; } .modal-contents.is-show { display: block; } .modal-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } .modal-body { display: none; } .modal-body.is-show { display: block; } .modal-close { position: absolute; top: -30px; right: 0; }
$(function() { $('.modal-link').on('click', function() { var target = $(this).data('modaibody'); $('html').addClass('is-fixed'); $('.modal-bg').addClass('is-show'); $('.modal-contents').addClass('is-show'); $('#' + target).addClass('is-show'); }); $('.modal-close').on('click', function() { $('html').removeClass('is-fixed'); $('.modal-bg').removeClass('is-show'); $('.modal-contents').removeClass('is-show'); $('.modal-body').removeClass('is-show'); }); });
試したこと
jsでtouchmove で event.preventDefault();をするというのもみつけましたが、
jsの記述の仕方がわからず、組み合わせることができずにいます。
試したこと 2
Bootstrap4ではどうだろうとiOSでみてみました。
「長いコンテンツのスクロール」に、"モーダルはページ自体とは独立してスクロール。"とありますが、
これも背景が動く状態で参考にできませんでした。
https://cccabinet.jpn.org/bootstrap4/components/modal
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。