質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

632閲覧

モーダルウィンドウを出して中身をスクロールするき、背景(body)も動いてしまうので固定したいです。

Kooomari

総合スコア12

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/10/09 14:25

編集2022/01/12 10:55

前提・実現したいこと

モーダルウィンドウを出して、その中のテキストをスクロールしようとすると、背景(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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

dialogのサンプル

css

1.d{height:500px;} 2#d1{background-Color:yellow;} 3#d2{background-Color:lime;} 4#d3{background-Color:aqua;} 5dialog{ 6 height:60px; 7 width:250px; 8 top:calc(50% - 30px); 9 position:fixed; 10 overflow-x:hidden; 11 overflow-y:scroll; 12} 13dialog:not([open]) { 14 display:none; 15} 16*::-ms-backdrop, dialog { 17 color:red; 18 padding:10px; 19 background-Color:#ffffff; 20 border:3px solid #000000; 21 left:calc(50% - 125px); 22 } 23:-ms-lang(x), ::-webkit-meter-bar,dialog { 24 padding:10px; 25 background-Color:#ffffff; 26 border:3px solid #000000; 27 left:calc(50% - 125px); 28}

javascript

1window.addEventListener('DOMContentLoaded', function(e){ 2 document.querySelector('input[value=open').addEventListener('click',function(e){ 3 document.querySelector('dialog').setAttribute("open","open"); 4 }); 5 document.querySelector('dialog input[value=close]').addEventListener('click',function(e){ 6 var n=e.target; 7 var p=null; 8 while(n){ 9 n=n.parentNode; 10 if(n.nodeName=="DIALOG"){ 11 n.removeAttribute("open"); 12 break; 13 } 14 } 15 }); 16});

HTML

1<dialog> 2<span><input type="button" value="close"></span> 3<hr> 4<textarea size="10"> 5aaaaaaaaaaaaaaaaaaaa 6bbbbbbbbbbbbbbbbbbbb 7cccccccccccccccccccc 8dddddddddddddddddddd 9eeeeeeeeeeeeeeeeeeee 10ffffffffffffffffffff 11gggggggggggggggggggg 12</textarea> 13<div>1</div> 14<div>2</div> 15<div>3</div> 16<div>4</div> 17<div>5</div> 18<div>6</div> 19<div>7</div> 20</dialog> 21<div id="d1" class="d"> 22<input type="button" value="open"> 23d1</div> 24<div id="d2" class="d">d2</div> 25<div id="d3" class="d">d3</div>

投稿2018/10/10 04:13

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問