Question

在iPad Safari上打开以下HTML。在iframe中向下滚动。选择导致CSS更改的男性或女性单选按钮。请注意iframe滚动回到顶部。我在我正在处理的应用程序中遇到同样的问题，这个问题只发生在iPad上（Android和桌面浏览器都没有这个问题）。

<!DOCTYPE html>
<html>
  <head>
    <title>iframe test</title>
    <style>
      body {
        margin: 0;
        padding: 20px;
      }
      div.iframe-container {
        width: 850px;
        height: 400px;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #cecece;
      }
    </style>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
  </head>
  <body>
    <form>
      <input id="genderMale" type="radio" name="gender" value="male" onchange="onRadioSelect();"/>
      <label for="genderMale">Male</label>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <input id="genderFemale" type="radio" name="gender" value="female" onchange="onRadioSelect();"/>
      <label for="genderFemale">Female</label>
    </form>
    <br/>
    <div class="iframe-container">
      <iframe src="http://www.engadget.com" height="100%" width="100%" frameBorder="0"></iframe>
    </div>
  </body>
</html>

<script type="text/javascript">
if((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null)) {
  $(".iframe-container").css("overflow", "auto");
}

function onRadioSelect(event) {
  switch($("input:checked").val()) {
  case "male":
    $("body").css("border", "2px solid #ff0000");
    break;
  case "female":
    $("body").css("border", "2px solid #0000ff");
    break;
  }
  setTimeout(function() {
    $("body").css("border-style", "none");
  }, 250);
}
</script>

任何想法如何防止这种情况发生？我希望滚动位置保持不变，因为在我的父页面中发生了其他事情。

Answer 1

我有同样的问题。解决了可滚动的div。

使用以下样式在内容（而非iframe）周围创建一个div：

<div style="-webkit-overflow-scrolling:touch; overflow-x:hidden; overflow-y:auto; height:100%;">
  <iframe src='#' />
</div>

如果仍然无法解决问题，请尝试删除<DOCTYPE>，因为HTML5不支持<DOCTYPE>

CSS更改后，IPad iframe滚动到顶部

1 个答案: