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

Posted 2023-03-05

【中文标题】iOS 9 `-webkit-overflow-scrolling:touch` 和 `overflow: scroll` 破坏了滚动功能

【英文标题】：iOS 9 `-webkit-overflow-scrolling:touch` and `overflow: scroll` breaks scrolling capability

【发布时间】：2015-12-30 02:53:24

【问题描述】：

我正在开发一个 web 应用程序，我在 iFrame 中有一个 div，其中包含我想要滚动的隐藏、溢出的内容。

在 ios 9 上的 Safar 上，当我将 -webkit-overflow-scrolling:touch; 添加到 div 时（已经有 overflow-y: scroll; 以使滚动具有流畅的感觉，它会中断并且根本不滚动。

我知道这是一个已知问题，但我还没有找到与我的场景相关的解决方案：我的 iFrame 不仅仅是传输数据，它们实际上包含用户的内容。方向无关紧要，内容始终需要可滚动。

【问题讨论】：

您是否厌倦了在 body 标记中指定 overflow-y 像这样 body overflow-y: scroll; 这可能会起作用，因为它将应用于整个站点，而不仅仅是单个 div

@BrentWhite 不，这不能解决问题

你能解决这个问题吗？发布一个小提琴，以便我可以看到问题。

@BrentWhite 我很难展示小提琴，因为这是一大堆 iframe

【参考方案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 会尝试（需要）进行一些重度优化，而这些优化不适用于某些类型的动态内容。

【讨论】：

哇，好脏，好肮脏.. 成功了。谢谢克里斯托弗，我花了 2 个小时改变高度和溢出，直到我看到你的 hack

像魅力一样工作！

这是针对这种情况的完美解决方案。也在这里工作过！

哇！为我工作！

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

【参考方案2】：

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

Heres a CodePen demonstrating this issue，包括 Christopher Camps 修复。

【参考方案3】：

这个 Safari 漏洞的另一个技巧似乎是使用 javascript 设置 style="overflow: none" 并立即将其重置为之前的值。