如何解决 iFrame 在 IOS/iphone 上不滚动的问题？答案

【问题标题】：How to I resolve iFrame not scrolling on IOS/iphone?如何解决 iFrame 在 IOS/iphone 上不滚动的问题？
【发布时间】：2020-04-08 11:16:03
【问题描述】：

我正在使用 iFrame 来显示文档。该文档有几页，需要在 iphone 上可滚动。目前它是静态的，无法滚动。这是我的代码：

   return (
      <div className="policyViewDocumentContainer">
        <AccountFlowHeader guid={guid} history={history} handleSignOut={this.handleSignOut} />
        <p className="policyViewInternalHeader">
         Card
        </p>
        <hr />
        <div className="policyViewDocumentInnerContainer">
          <object
            title="Policy Document"
            data={`https://agency.${env}api.endpoint.com/agency/policyNumber/${contractNum}`}
            type="application/pdf"
            style={{
              width: '100%',
              minHeight: 'calc(100vh - 130px',
            }}
          >
            <embed
              src={`https://agency.${env}api.endpoint.com/buckle/policyNumber/${contractNum}`}
              type="application/pdf"
            />
          </object>
          <div />
        </div>
      </div>
    );
  }
}

这显然只是渲染方法。我想我需要调整 webkit 的样式或类似的东西。当然，这发生在 iPhone 上的 Safari 中。

【问题讨论】：

iFrame 标签在哪里使用？我在这里只看到一个对象和嵌入标签。

标签： ios css reactjs iframe jsx

【解决方案1】：

我无法准确判断您的代码出了什么问题，但 iframe 在 iOS 上不滚动是一个常见问题。通常，这可以通过在包装元素上应用-webkit-overflow-scrolling: touch; 来解决，如下所示：

.scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

.scroll-wrapper iframe {
    /* ... */
}

此示例 + 其他信息可在此处找到：https://davidwalsh.name/scroll-iframes-ios

【讨论】：