Question

所以我有一个显示Facebook页面的iFrame，我正在尝试启用本机'bounce'类型滚动，但无法使任何工作。

我试过这个：

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

但到目前为止还没有运气 - 在模拟器和真实iOS设备上都经过测试。

有什么想法吗？

Answer 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）。通过设置高度，我们可以动态添加或删除用户的高亮文本。

希望有所帮助，

Answer 2

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

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

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

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

更新：如果你根据父div的滚动位置放大iframe怎么办？因此父div滚动100px并使iframe 100px更大...（假设iframe具有无限高度并假设其滚动条被隐藏）

iOS - iFrame中的本机滚动

2 个答案: