以前に下記の質問をした者です。
Drawer.jsで背景の固定をしたい
上記質問を要約すると、drawer.jsで実装しているドロワーナビが開いたときに
背景のコンテンツをスクロールさせないようにしたく、
ドロワーが開いたときにEventListenerのpassiveをfalseに指定してスクロールをさせないようにして
ドロワーが閉じたときにEventListenerを解除する事で解決しました。
ですが上記は背景のみ固定ではなく、ページ全体のスクロール固定となっています。
ナビ内の情報が増えてきたことで、やはり背景を固定・ナビはスクロールにしたくなりました。
一応解決はしましたが、問題点もあり最善ではないと思いますので
よりよい方法をご教示いただけますと幸いです。
解決策
iPhoneでも背景のスクロールを固定したモーダル(ドロワー)
上記サイトを参考に下記の記述を行いました。
jQuery
1var qux,quux,quuux; 2$(window).on('load scroll',function(){ 3 quux = $(this).scrollTop(); 4}); 5 6 $(document).ready(function() { 7// ドロワーナビが開いたとき 8 $('.drawer').drawer(); 9 $('.drawer').on('drawer.opened', function(){ 10// スクロール停止の処理 11 $('html,body').css('position','fixed'); 12 quuux = quux; 13 $('html,body').css('top','-'+quux+'px'); 14 }); 15 16// ドロワーナビが閉じたとき 17 $('.drawer').on('drawer.closed', function(){ 18// スクロール停止することを停止する処理 19 $('html,body').css('position',''); 20 $('html,body').css('top',''); 21 $(window).scrollTop(quuux); 22 }); 23 });
一応、再現できるHTMLも記載します。(drawer.jsのデモです)
html
1<html> 2<head> 3<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> 4 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 6<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> 7<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> 8<script> 9$(document).ready(function() { 10 $('.drawer').drawer(); 11}); 12</script> 13</head> 14<body class="drawer drawer--right"> 15 <header role="banner"> 16 <button type="button" class="drawer-toggle drawer-hamburger"> 17 <span class="sr-only">toggle navigation</span> 18 <span class="drawer-hamburger-icon"></span> 19 </button> 20 <nav class="drawer-nav" role="navigation"> 21 <ul class="drawer-menu"> 22 <li><a class="drawer-brand" href="#">Brand</a></li> 23 <li><a class="drawer-menu-item" href="#">Nav</a></li> 24 <li><a class="drawer-menu-item" href="#">Nav</a></li> 25 <li><a class="drawer-menu-item" href="#">Nav</a></li> 26 <li><a class="drawer-menu-item" href="#">Nav</a></li> 27 <li><a class="drawer-menu-item" href="#">Nav</a></li> 28 <li><a class="drawer-menu-item" href="#">Nav</a></li> 29 <li><a class="drawer-menu-item" href="#">Nav</a></li> 30 <li><a class="drawer-menu-item" href="#">Nav</a></li> 31 <li><a class="drawer-menu-item" href="#">Nav</a></li> 32 <li><a class="drawer-menu-item" href="#">Nav</a></li> 33 <li><a class="drawer-menu-item" href="#">Nav</a></li> 34 <li><a class="drawer-menu-item" href="#">Nav</a></li> 35 <li><a class="drawer-menu-item" href="#">Nav</a></li> 36 <li><a class="drawer-menu-item" href="#">Nav</a></li> 37 <li><a class="drawer-menu-item" href="#">Nav</a></li> 38 </ul> 39 </nav> 40 </header> 41 <main role="main"> 42 <p>AAAAAAAAAAAAAA</p> 43 <p>BBBBBBBBBBBBBB</p> 44 <p>AAAAAAAAAAAAAA</p> 45 <p>BBBBBBBBBBBBBB</p> 46 <p>AAAAAAAAAAAAAA</p> 47 <p>BBBBBBBBBBBBBB</p> 48 <p>AAAAAAAAAAAAAA</p> 49 <p>BBBBBBBBBBBBBB</p> 50 <p>AAAAAAAAAAAAAA</p> 51 <p>BBBBBBBBBBBBBB</p> 52 <p>AAAAAAAAAAAAAA</p> 53 <p>BBBBBBBBBBBBBB</p> 54 <p>AAAAAAAAAAAAAA</p> 55 <p>BBBBBBBBBBBBBB</p> 56 <p>AAAAAAAAAAAAAA</p> 57 <p>BBBBBBBBBBBBBB</p> 58 <p>AAAAAAAAAAAAAA</p> 59 <p>BBBBBBBBBBBBBB</p> 60 <p>AAAAAAAAAAAAAA</p> 61 <p>BBBBBBBBBBBBBB</p> 62 </main> 63</body> 64</html>
問題点
iOS(iPhone6)でしか動作確認ができていませんが、
ナビを開いた直後にナビが閉じてしまう場合があります。
WEBブラウザ自体のメニューバーは
上方向にスクロール時のみ表示・下にスクロール時は非表示となりますが、
ブラウザメニューが非表示の時にドロワーナビを開くと
ブラウザメニューが開かれてしまい、ドロワーナビが閉じてしまいます。
恐らく、 $('html,body').css('top','-'+quux+'px'); の記述で
(動きとしては見えないが)上にスクロールされており
ブラウザのメニューが表示され、windowの高さが再取得されてしまう事で
ドロワーナビが消えてしまうのかと想像しています。
ちなみに、何故かEdgeとsleipnirではブラウザメニューが表示されても消えません。
解決策や、他の手段がありましたらご教示いただけますと幸いです。
長くなってしまいましたが、どうぞよろしくお願いいたします。
他、参考サイト
CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー
今回の実装と近いのですが、こちらはドロワーを開くとコンテンツが一番上までスクロールしてしまう上にドロワーが閉じてしまいました。
ドロワーが閉じる理由は今回の実装と同じだと思います。
iOS でページ全体はスクロールを無効にし、個別の要素(textarea など)では有効にする方法
1行目のtextareaを固定したいnavに変更してみましたが、動作せず、知識不足からどう触ればいいかもわかりませんでした。
JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ
モーダル時の記事の為、ドロワーメニューへの応用の仕方がわかりませんでした。