index.htmlにてハンバーガーメニューをクリックで、iframeのメニューコンテンツをposition: fixed;で呼び出したいと考えています。
スマホ実機で確認したのですが、ハンバーガーメニューを押してiframeが表示されるまでの一瞬の間にindex.htmlの表示部分を触ってしまうと、
iframeが表示されてもスクロールできなくなってしまいます。(後ろのindex.htmlの部分がスクロールしているようです。)
iframeが完全に表示されてからメニュー部分を触ると、問題なくスクロールはできる状態です。
こちら解決方法はありますか?
html
1<div class="open"></div> 2<div class="iframe-wrap"> 3 <iframe src="panel-menu.html" frameborder="0" scrolling="yes" id="iframe"></iframe> 4</div>
css
1.iframe-wrap { 2 position:fixed; 3 left: 0; 4 top: 0; 5 width: 100%; 6 height: 100vh; 7 overflow: auto; 8 background: #fff; 9 -webkit-overflow-scrolling:touch !important; 10 z-index: 60; 11} 12 13#iframe { 14 width: 100%; 15 height: 100vh; 16}
jquery
1$(document).ready(function($){ 2 $('.iframe-wrap').hide(); 3 $('.open').click(function() { 4 $('.iframe-wrap').show(); 5 }); 6}); 7 8$(window).on("load", function(e){ 9 $("#iframe").contents().find(".close").on("click", function(e){ 10 $('.iframe-wrap').hide(); 11 }); 12});
あなたの回答
tips
プレビュー