CSS更改后iPad iframe滚动到顶部答案

【问题标题】：IPad iframe scrolls to top after CSS changeCSS更改后iPad iframe滚动到顶部
【发布时间】：2015-08-04 22:49:37
【问题描述】：

在 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>

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

【问题讨论】：

标签： html ipad iframe scroll mobile-safari

【解决方案1】：

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

使用以下样式围绕内容（不是 iframe）创建了一个 div：

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

如果这不能解决问题，请尝试删除 <DOCTYPE>，因为 HTML5 不支持 <DOCTYPE>

【讨论】：