javascript - 拖动时 iframe 在 iOS 上移位

Question

我的网站上有一个 iframe，当您单击 Make an Appointment 按钮时，它会被填充。 iframe 包含一个带有多个输入字段的联系表单。

一切正常，但出于某种原因，在 iOS(iPad 和 iPhone 5/6 - 我测试了 Safari 和 Chrome)上，表单可拖动到其容器的宽度和高度之外。它应该只能在 y 轴上滚动；就像在 Android 设备上一样。请参见下面的屏幕截图。

我看过很多关于 S/O 的帖子，但还没有找到任何与 iOS 设备/浏览器的这种特殊细微差别相关的问答。

代码如下:

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 设备上禁用此功能？

Answer 1

尝试在 iframe 上添加 scrolling="no" 并更改一些 iframe CSS，例如，

#iframecontainer iframe { 
  width: 1px;/* Make it a very small for your viewport */
  min-width:100%;/* Overwrite width. Let it decides the actual width of iframe */
  height: 600px; 
  position: absolute; 
  border: none; 
}