iOS 9中的`-webkit-overflow-scrolling:touch`和`overflow:scroll`会破坏滚动功能

Question

我正在开发一个web应用程序，其中包含一个隐藏、溢出的div在iFrame中，我想让它可以滚动。但是，在iOS 9上的Safari浏览器中，当我为该div添加-webkit-overflow-scrolling:touch;属性后（该div已经有overflow-y: scroll;属性以使滚动有流畅感），它会出现问题并且无法滚动。

我知道这是一个已知问题，但我还没有找到适用于我的情况的解决方案：我有一些iFrames不仅传输数据，而且实际上包含用户内容。方向不重要，内容始终需要可滚动。

- Zach

---

你尝试过在body标签中指定overflow-y吗？像这样：body {overflow-y: scroll;}。这可能会起作用，因为它将应用于整个站点，而不仅仅是单个的div。 - brent_white

@BrentWhite 不，那并没有解决这个问题。 - Zach

你解决了吗？发一个fiddle让我看看问题。 - brent_white

@BrentWhite 对我来说很难展示一个fiddle，因为这是一个iframe的大巢穴。 - Zach

Answer 1

我刚遇到了一个问题，涉及到一个带有 overflow: auto 和 -webkit-overflow-scrolling: touch 样式的 div 中的动态内容。

肮脏、丑陋的解决方法：在加入 dom 时强制将其内部内容变得比滚动 div 更大。类似于这样：

<div style="overflow: auto; -webkit-overflow-scrolling: touch;">
    <div style="min-height: 101%">
        dynamic content
    </div>
</div>

我的理论是，当添加-webkit-overflow-scrolling: touch时，Safari会尝试（需要）进行一些重型优化，而这些优化可能与某些类型的动态内容不兼容。

- Christopher Camps

---

哇，好脏，好肮脏... 但它管用了。谢谢 Christopher，我花了两个小时调整高度和溢出，直到看到你的骇客技巧。 - rotoxl

运行得非常好！ - Petar Donchev Marinov

这是这种情况的完美解决方案。在这里也起作用！ - Claudio Nastasi Junior

哇！对我有用！ - Syed Washfi Ahmad

2019年：我仍然遇到同样的问题。在Safari中是否有解决此问题的进展或替代解决方案？ - MarcoLe

Answer 2

我也遇到了在iOS9上使用webkit-overflow-scrolling: touch的问题。可以在设备或iOS模拟器上重现。正如Christopher Camps所提到的，它只会在动态内容（即从小于可滚动容器变为大于容器的内容）中发生。

这里是一个CodePen演示了这个问题，包括Christopher Camps的修复方法。

- Thomas Kelly

Answer 3

针对这个Safari浏览器的漏洞，另一个解决方法是使用JavaScript设置style="overflow: none"，并在立即将其重置回先前的值。

- stracktracer