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

Question

我正在使用 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 中发生的。

Answer 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