iOS Safari 没有滚动到 iframe 中的锚点答案

【问题标题】：iOS Safari not scrolling to anchor in iframeiOS Safari 没有滚动到 iframe 中的锚点
【发布时间】：2017-03-11 12:19:04
【问题描述】：

我有一个带有iframe 的HTML 页面，我需要在加载时滚动到某个位置。我的示例在除 iOS Safari 之外的大多数浏览器中都能正常工作——这是我真正需要的。它倾向于在第一个页面加载时在 iOS Safari 中工作，但通常之后的任何刷新都会将iframe 内容滚动到顶部。

我已经了解了重定向导致#anchorname 被丢弃的问题，但在这种情况下，情况并非如此。

真正的iframe 内容和主页位于不同的域中。我可以影响iframe 的内容，但我无法控制它。它也用于其他目的，所以我做任何可能干扰它的自定义的能力有限。

此处的实时链接： https://s3.amazonaws.com/ios-iframe-test/iframe_test.html

这是父内容：

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" name="viewport">

    <style type="text/css">

      #root {
        position: relative;
      }

      #wrapper {
        height: 300px;
        width: 300px;
        overflow-x: hidden;
        overflow-y: scroll;
        position: relative;
        -webkit-overflow-scrolling: touch;
      }

      iframe {
        width: 100%;
        height: 100%;
      } 

    </style>

  </head>
  <body>
    <h1>Why won't this iframe scroll to where I want?</h1>
    <div id="root">
      <div id="wrapper">
        <iframe src="https://s3.amazonaws.com/ios-iframe-test/iframe_content.html#scrolltome"></iframe>
      </div>
    </div>
  </body>
</html>

这是iframe的内容：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>

  <h1>Have some ipsum...</h1>
  <p>
    Lorem... (live example has much more here just to make the scrolling apparent)
  </p>

  <h1 style="color: red;">
    <a name="scrolltome" id="scrolltome">This is where I want to scroll></a>
  </h1>

  <p>
    Lorem...
  </p>

</html>

【问题讨论】：

Safari 在 iframe 上滚动有很多问题。可以用 JS 解决方案吗？

标签： html ios iframe mobile-safari

【解决方案1】：

这是由于 iOS Safari 错误导致 iframe 扩展到其内容的高度。您可以使用 Safari 桌面调试器并运行来验证这一点：

document.querySelector('iframe').offsetHeight

解决方案是通过将内容放入position: fixed 容器并允许其滚动来降低 iframe 主体的高度。

例如，将body的内容放入<main>标签中，设置样式如下：

    <html>
     <head>
       <style>
          main {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 10px;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            z-index: 1;
          }
       </style>
     </head>
     <body>
       <main>
          <h1>Have some ipsum...</h1>
          <p>Lorem... (live example has much more here just to make the scrolling apparent)</p>
          <h1 style="color: red;">
            <a name="scrolltome" id="scrolltome">This is where I want to scroll</a>
          </h1>
          <p>
             Lorem...
          </p>
       </main>
     </body>
    </html>

这告诉 Safari iframe 正文与包含它的页面高度相同，但其内容是可滚动的。你的锚现在可以工作了。

【讨论】：