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

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

ただいまの
回答率

87.80%

[CSS、iOS]-webkit-overflow-scrolling:touch;を指定している領域の子要素をモーダルで表示すると親要素の範囲内にしか現れない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,364

score 51

前提・実現したいこと

カルーセル内のコンテンツをモーダルで全画面表示させたい。

<ul>内のlistを-webkit-overflow-scrolling:touch;で
簡易カルーセルにしています。

list内にはモーダルを出現させる為のトリガーと
モーダルに表示するコンテンツが内包されています。

モーダル表示するコンテンツは
display:none;にしておいて
jQueryでfadeInさせています。

発生している問題・エラーメッセージ

windows:chrome、IE、Edge、firefox
android:chrome
では問題なく意図通りの動きになりましたが
iOS:safari、chrome
で動作させた際、
<ul>内にモーダルが表示され全画面表示になりません。
重なり順の問題かとz-indexなどを見直してみましたが
原因がわかりません。

調べてみると
https://github.com/scottjehl/Device-Bugs/issues/14
にoverflow-scrolling:touch;を指定していると
z-indexが無視されるようだという事が書かれていましたが
これを解消する方法がわかりません。

該当のソースコード

<ul>
 <li>
  <label>button1</label>
  <div><p>モーダル表示させるコンテンツ1</p></div>
 </li>
 <li>
  <label>button2</label>
  <div><p>モーダル表示させるコンテンツ2</p></div>
 </li>
 <li>
  <label>button3</label>
  <div><p>モーダル表示させるコンテンツ3</p></div>
 </li>
</ul>
ul{
 width:100%;
 overflow-x:scroll;
 -webkit-overflow-scrolling:touch;
 overflow-scrolling:touch;
 display:flex;
 list-style:none;
}
li{
 width:250px;
 min-width:250px;
 padding:20px;
 box-sizing:border-box;
 border:1px solid #CCC;
}
label{
 cursor:pointer;
}
label:after{
 content:none;
}
div{
 display:none;
 position:fixed;
 top:0;left:0;right:0;bottom:0;
 z-index:100;
 background-color:rgba(0, 0, 0, .70);
 padding:30px;
}
p{
  background-color: #FFF;
  padding:20px;
}
$(function() {
  var $overlay = $('div');
  $('label').on('click', function() {
    $(this).next($overlay).fadeIn(300);
  });
});

※jQueryのver.は3.3.1です。

試したこと

overflow-x:scroll;
または
-webkit-overflow-scrolling:touch;
を切ると意図通りの動きになりますが
この2つを指定したままでモーダルを発動させたいのですが
上手くいきません。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

overflow-x:scroll;
-webkit-overflow-scrolling:touch;
の両方を指定している状態で実現する事は現状不可能に近い事が判明した為
モーダル表示させるコンテンツを<ul>要素の外にコピーして表示する方法で暫定的に実現。

フロー
1)カルーセルコンテンツの<label>をタップ
2)<label>要素の直後にある非表示状態モーダルコンテンツをコピー
3)カルーセルコンテンツの外にあるdiv.modalにコピーしたコンテンツをappend
4).modalをフェードイン
5)モーダルコンテンツ内の閉じるボタンをタップしたら
6).modalをフェードアウト
7).modalにペーストされていたコンテンツを空に戻す

という面倒な段階を踏むことになりましたが
一応意図通りの動きにはなりました。

これしか方法無いのかなぁ……。

<ul>
 <li>
  <label>button1</label>
  <div class="off"><div class="on"><p>モーダル表示させるコンテンツ1</p><button class="close">閉じる</button></div></div>
 </li>
 <li>
  <label>button2</label>
  <div class="off"><div class="on"><p>モーダル表示させるコンテンツ2</p><button class="close">閉じる</button></div></div>
 </li>
 <li>
  <label>button3</label>
  <div class="off"><div class="on"><p>モーダル表示させるコンテンツ3</p><button class="close">閉じる</button></div></div>
 </li>
</ul>
<div class="modal"></div>
ul{
 width:100%;
 overflow-x:scroll;
 -webkit-overflow-scrolling:touch;
 overflow-scrolling:touch;
 display:flex;
 list-style:none;
}
li{
 width:250px;
 min-width:250px;
 padding:20px;
 box-sizing:border-box;
 border:1px solid #CCC;
}
label{cursor:pointer;}
label:after{content:none;}
.off{
  display: none;/*liモーダル表示させるコンテンツ(非表示)*/
}
.on{
 padding:20px;/*ulの外にコピーする部分*/
}
p{
  background-color: #FFF;
  padding:20px;
}
.modal{
 display:none;
 position:fixed;
 top:0;left:0;right:0;bottom:0;
 z-index:100;
 background-color:rgba(0, 0, 0, .70);
}
button{cursor:pointer;}
$(function() {
  $("label").on('click',function(){
    //クリックされた要素の次のdivの小要素をコピーして.modalにペースト
    $(this).next("div").children(".on").clone().appendTo(".modal");
    //.modalをフェードイン
    $(".modal").fadeIn(300);
      //.closeが押されたら
      $("button").on("click",function(){
        $.when(//.modalをフェードアウトしてから
          $(".modal").fadeOut(300)
        ).done(//.modalにペーストした内容を削除
          $(".modal").empty()
        )
    });
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • JavaScriptに関する質問
  • [CSS、iOS]-webkit-overflow-scrolling:touch;を指定している領域の子要素をモーダルで表示すると親要素の範囲内にしか現れない