0
Make an Appointment
ボタンをクリックすると、私のウェブサイトにiframeが表示されます。 iframeには複数の入力フィールドを持つ連絡フォームが含まれています。ドラッグしたときにiOSでiframeが移動する
すべてはうまくいきますが、何らかの理由でiOS(iPadとiPhone 5/6 - 私はSafariとChromeをテストしました)では、フォームはそのコンテナの幅と高さを超えてドラッグ可能です。 y軸にのみスクロール可能でなければなりません。 Android搭載端末のようです。下のスクリーンショットを参照してください。
私はS/O上の多数の投稿を見てきましたが、iOSデバイスやブラウザのこの特定のニュアンスに関係するQ/Aをまだ見つけていません。
HTML::
<div id='button'><button id='contact'>MAKE AN APPOINTMENT</button></div>
<div id="block"></div>
<div id="iframecontainer">
<a id='close' href='#'>X</a>
<div id="loader"></div>
<iframe></iframe>
</div>
はJQuery:
$('document').ready(function() {
$('#contact').click(function() {
$('#block').fadeIn();
$('#iframecontainer').fadeIn();
$('#header-wrapper').css("visibility", "hidden");
var width = $(window).width();
$('#iframecontainer iframe').attr('src', 'http://a-link-to-my-iframe.html');
if (width > 850) {
$('#iframecontainer').css('width', '790px');
$('#iframecontainer').css('margin-left', '-395px');
}
else {
$('#iframecontainer').css('width', '310px');
$('#iframecontainer').css('margin-left', '-155px');
}
$('#iframecontainer iframe').load(function() {
$('#loader').fadeOut(function() {
$('iframe').fadeIn();
});
});
});
そして、CSS:ここ
はコードである#contact {
color: #c2c2c2;
background: #151515;
border: 1px solid #c2c2c2;
padding: 13px 26px;
text-decoration: underline;
font-family: inherit;
letter-spacing: 2px;
font-size: 18px;
margin: 0 auto;
}
#iframecontainer {
width:75%;
height: auto;
display: none;
position: fixed;
-webkit-overflow-scrolling:touch;
overflow-y: auto;
height:600px;
top: 10%;
background:#FFF;
border: 1px solid #666;
border: 1px solid #555;
box-shadow: 2px 2px 40px #222;
z-index: 999999;
left: 50%;
margin-left: -395px;
}
#iframecontainer iframe {
width: 100%;
height: 600px;
position: absolute;
border: none;
}
#loader {
width: 250px;
height: 250px;
margin:auto;
}
#block {
background: #000;
opacity:0.6;
position: fixed;
width: 100%;
height: 100%;
top:0;
left:0;
display:none;
}
そして、ここでのスクリーンショットであります私が言及しているもの:
iOSデバイス上でこれを無効にする具体的な方法はありますか?
スクロールをインラインフレームに
scrolling="no"
を追加するなど、いくつかのiframe CSSを変更してください。私はCSSの提案を試みます。 – hammerabi更新:私は上記の解決策を試みたが、うまくいかなかった。私はy軸でフォームをスクロールできるようにする必要があります。私はスクロール時にこのような "ラバーバンド"機能を無効にするために探しています。 – hammerabi