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

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

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

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

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

10846閲覧

iphoneでモーダルウインドウがスクロールできない

suiheisan

総合スコア35

JavaScript

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

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/09/17 19:30

モーダルウィンドウが固定されて困っています。androidブラウザでは問題ないのですが、iphoneのsafariで動作を確認すると、スクロールできずに固定されてしまいます。

html

1<!DOCTYPE HTML> 2<head> 3<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5<link rel="stylesheet" type="text/css" href="css/modal_test.css" /> 6<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 7<script src="js/modal_test.js" type="text/javascript"></script> 8</head> 9 10<body> 11<div id="wrapper"> 12<div id="content"> 13コンテンツ 14</div> 15 16<div id="foot_bt"> 17 モーダルウィンドウを表示 18</div> 19 20<div id="input_box"> 21 22<div id="input_form" style="margin-top:20px;"> 23 24<ul id="tabnavi"> 25 <li><a href="#tab01">タブ1</a></li> 26 <li><a href="#tab02">タブ2</a></li> 27</ul> 28 29<div id="tabcontent"> 30 31<div id="tab01"> 32 <div id="show_btn">表示する</div> 33 <div id="kensaku_kekka"></div> 34</div> 35 36<div id="tab02"> 37 タブ2の内容 38</div> 39 40</div><!-- id="tabcontent" end --> 41 42</div> 43 44</div><!-- id=input_box --> 45 46 47<div id="modal-overlay"></div> 48</div><!-- wrapper --> 49 50</body> 51</html>

css

1html, body { 2 height: 100%; 3} 4 5 6#wrapper{ 7 height: 100vh; 8 height: 100%; 9 overflow: scroll; 10 -webkit-overflow-scrolling: touch; 11} 12 13#content { 14 width: 90%; 15 padding-left:5%; 16 padding-right:5%; 17 padding-top:25px; 18 background-color: #D8EAF2; /* 水色 */ 19 padding-bottom:270px; 20 position: relative; 21} 22 23 24#foot_bt { 25 border:1px solid #000000; 26 position: fixed; 27 z-index:5; 28 bottom: 0; 29 left: 0; 30 width: 100%; 31 height: 50px; 32 background-color: #fff; 33 text-align:center; 34 line-height: 50px; /* テキストの上下センタリング */ 35} 36 37#input_box { 38 border:1px solid #000000; 39 position: fixed !important; 40 top: 50%; 41 left: 50%; 42 /* 要素の表示位置を移動 */ 43 -webkit-transform: translate(-50%,-50%); 44 -moz-transform: translate(-50%,-50%); 45 -ms-transform: translate(-50%,-50%); 46 -o-transform: translate(-50%,-50%); 47 transform: translate(-50%,-50%); 48 49/* z-index:-1; */ 50 display:none; /* 最初は非表示 */ 51 z-index:50; 52 width: 90%; 53 height: 90%; 54 background-color: #ffffff; 55 color: #000; 56 padding:5px; 57 font-size:120%; 58/* overflow: auto; */ 59 overflow: scroll; 60} 61 62#modal-overlay{ 63 z-index:40; 64 display:none; 65 position:fixed; 66 top:0; 67 left:0; 68 width:100%; 69 height:120%; 70 background-color:rgba(0,0,0,0.50); 71} 72 73#tabnavi ul { 74 margin:0; 75 padding:0; 76} 77 78#tabnavi li { 79 display:inline-block; 80 margin:5px 0px 0px 0px; 81 -webkit-touch-callout:none; 82 -webkit-tap-highlight-color:rgba(0, 0, 0, 0); 83} 84 85#tabnavi li a { 86 display:inline-block; 87 background:#ccc; 88 color:#fff; 89 padding:3px; 90 font-size:90%; 91 text-decoration:none; 92}

javascript

1$(function() { 2 3$('#foot_bt').on('click', function (e) { 4 //モーダルウインドウを表示 5 $('#modal-overlay').show(); 6 $('#input_box').show(); 7}); 8 9 10$('#show_btn').click(function(){ 11 var data = "タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>タブ1の内容<br>"; 12 jQuery( '#kensaku_kekka' ) . html(data); 13}); 14 15 16$('#tabnavi a').click(function () { 17 $('#tabcontent > div').hide().filter(this.hash).fadeIn(); //アンカー要素を表示 18 $('#tabnavi a').removeClass('active'); 19 $(this).addClass('active'); 20 return false; //いれてないとアンカーリンクになる 21}).filter(':eq(0)').click(); //最初の要素をクリックした状態に 22 23 24$('#tabcontent > div').hide(); //初期では非表示 25 $('#tabnavi a').click(function () { 26 $('#tabcontent > div').hide().filter(this.hash).fadeIn(); //アンカー要素を表示 27 $('#tabnavi a').removeClass('active'); 28 $(this).addClass('active'); 29 return false; //いれてないとアンカーリンクになる 30}).filter(':eq(0)').click(); //最初の要素をクリックした状態に 31 32});

次のような操作をするとモーダルウインドウがスクロールできません。

下部にある「モーダルウィンドウを表示」ボタンをタップと、モーダルウインドウが出現します。モーダルウインドウ内の「表示する」をタップすると「タブ1の内容」がモーダルウインドウの領域以上に表示するになっています。ここで縦にスクロールしたいのですが固定されてしまいます。

android標準ブラウザで操作した場合、問題なくスクロールできますが、iphoneのiOS9 safariで動作を確認するとスクロールできません。

ただしiphoneでスクロールできなくなった状態で「タブ2」をタップ。再び「タブ1」をタップするとスクロールできる状態になります。なぜでしょう?

iphoneでもスクロールできるようになるにはどうすればいいでしょうか。
お願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

幅/高さに%を使用しているので、高さの計算に失敗しているのでは。とりあえず vw / vh に変えたらスクロールできました。元のコードで % の指定を vh より後に指定している箇所がありますが、逆です。% で指定の次に vh の指定を持ってこないと、期待通り上書きできません。

CSS

1html, 2body { 3 height: 100%; 4} 5 6#wrapper { 7 height: 100vh; 8 overflow: scroll; 9 -webkit-overflow-scrolling: touch; 10} 11 12#content { 13 width: 90vw; 14 padding-left: 5vw; 15 padding-right: 5vw; 16 padding-top: 25px; 17 background-color: #D8EAF2; 18 /* 水色 */ 19 padding-bottom: 270px; 20 position: relative; 21} 22 23#foot_bt { 24 border: 1px solid #000000; 25 position: fixed; 26 z-index: 5; 27 bottom: 0; 28 left: 0; 29 width: 100vw; 30 height: 50px; 31 background-color: #fff; 32 text-align: center; 33 line-height: 50px; 34 /* テキストの上下センタリング */ 35} 36 37#input_box { 38 border: 1px solid #000000; 39 position: fixed !important; 40 top: 50%; 41 left: 50%; 42 /* 要素の表示位置を移動 */ 43 -webkit-transform: translate(-50%, -50%); 44 -moz-transform: translate(-50%, -50%); 45 -ms-transform: translate(-50%, -50%); 46 -o-transform: translate(-50%, -50%); 47 transform: translate(-50%, -50%); 48 /* z-index:-1; */ 49 display: none; 50 /* 最初は非表示 */ 51 z-index: 50; 52 width: 90vw; 53 height: 90vh; 54 background-color: #ffffff; 55 color: #000; 56 padding: 5px; 57 font-size: 120%; 58 /* overflow: auto; */ 59 overflow: scroll; 60} 61 62#modal-overlay { 63 z-index: 40; 64 display: none; 65 position: fixed; 66 top: 0; 67 left: 0; 68 width: 100vw; 69 height: 120vh; 70 background-color: rgba(0, 0, 0, 0.50); 71} 72 73#tabnavi ul { 74 margin: 0; 75 padding: 0; 76} 77 78#tabnavi li { 79 display: inline-block; 80 margin: 5px 0px 0px 0px; 81 -webkit-touch-callout: none; 82 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 83} 84 85#tabnavi li a { 86 display: inline-block; 87 background: #ccc; 88 color: #fff; 89 padding: 3px; 90 font-size: 90%; 91 text-decoration: none; 92} 93```**動くサンプル:**[https://jsfiddle.net/u2rb76vk/1/](https://jsfiddle.net/u2rb76vk/1/)

投稿2016/09/18 07:00

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問