iOS - iFrame 中的原生滚动答案

【问题标题】：iOS - Native Scrolling in iFrameiOS - iFrame 中的原生滚动
【发布时间】：2016-06-13 19:31:00
【问题描述】：

所以我有一个显示 Facebook 页面的 iFrame，我正在尝试启用本机“反弹”类型的滚动，但无法正常工作。

我试过这个：

iframe {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}

但到目前为止运气不佳 - 在模拟器和真实 iOS 设备上进行了测试。

有什么想法吗？

【问题讨论】：

你知道页面在iframe里面的高度吗？因为那样你就可以使用 iScroll：cubiq.org/iscroll-5
该页面是从 Facebook 页面中提取的，因此是无限滚动，所以不幸的是……

标签： ios css iframe

【解决方案1】：

当我们的团队在 iOS 上构建 epub3 阅读器应用时，我遇到了同样的问题。

关注EpubJS v0.3 example，我们可以解决问题。

这是一个例子：

<div style="width:320px;height:570px;-webkit-overflow-scrolling:touch;overflow-y:scroll;">
    <iframe scrolling="no" src="..." style="width:320px;height:8071px;"></iframe>
</div>

注意：您必须计算 iFrame 高度并设置 CSS 样式（例如：8071px）。使用javascript，您可以使用 iframe.contentDocument.body.scrollHeight

你可以问我why we have to set height style。关注some suggestions 并不能帮助我们处理动态内容问题（您可以查看问题here）。通过设置高度，我们可以动态添加或删除用户的高亮文本。

希望对你有帮助，

【讨论】：

【解决方案2】：

这将是我的方法......

步骤 1. 增加 iframe 的大小直到滚动条消失，如下所示：http://davidjbradshaw.github.io/iframe-resizer/

第 2 步。使用 David Walsh 他的技巧与滚动 iframe 的父 div：https://davidwalsh.name/scroll-iframes-ios

但我认为它会失败，因为缺少跨域 iFrame 的身份验证。

更新：如果根据父 div 的滚动位置放大 iframe 会怎样？所以父 div 滚动 100px 并且你使 iframe 变大 100px...（鉴于 iframe 具有无限高度并假设它的滚动条被隐藏）

【讨论】：

不幸的是，我已经尝试过了——除非我做错了什么：jsfiddle.net/0g0xrLy0
可能必须使用图形 api 并进行自定义
对不起……但我也这么认为。