IOS -webkit-overflow-scrolling 在错误的轴上滚动，或者根本不滚动

Posted 2023-02-16

【中文标题】IOS -webkit-overflow-scrolling 在错误的轴上滚动，或者根本不滚动

【英文标题】：IOS -webkit-overflow-scrolling scrolls on wrong axis, or not at all

【发布时间】：2012-08-31 18:11:37

【问题描述】：

我正在为 ios 构建一个带有 html5 的移动应用程序。我正在使用“-webkit-overflow-scrolling: touch”来获得原生惯性滚动，但它非常有问题。我已经解决了直到滚动停止才呈现内容的问题，但一个持续存在的错误是：

当我尝试上下滚动时，没有任何反应，但当我尝试水平滚动时，内容会垂直滚动（离轴 90 度）。如果我浏览我的应用程序并返回到该页面，它有时会被修复。此外，尽管内容很丰富，但有时它根本不会滚动。

从我在谷歌上搜索的内容来看，共识似乎是 Apple 意识到了这个错误，并且不打算很快修复它。有没有人找到让 -webkit-overflow-scrolling 正常工作的解决方案？

【问题讨论】：

也有同样的问题。尚未找到解决方案。

【参考方案1】：

几个月来我也一直在与这个错误作斗争。我发现的最佳表征是：

https://bugs.webkit.org/show_bug.cgi?id=87391

这表示当页面具有 iFrame 并且内容是从 javascript 设置时会发生。我目前在The Graphics Codex version 1.6 中的解决方法是使用 iScroll4 显式滚动页面，而不是使用触摸滚动。由于 Javascript 是单线程的，因此如果您还要执行动画或后台加载内容，这可能会很慢。

【讨论】：

我也最终使用了 iScroll4。这并不理想，但它确实比 iOS 更好地模拟了 iOS 滚动。提示：我还通过将 transform3d 样式设置为 0,0,0 最终使滚动部分的内容硬件呈现。这样它们就会被预渲染，如果你有很多内容，你就不会感到紧张的滚动。

我在 iOS 上的 jQuery 对话框中滚动时遇到了同样的问题。插件不是一个很好的解决方案，而且仍然表现得有些奇怪。

【参考方案2】：

我遇到了同样的问题：使用-webkit-overflow-scrolling: scroll 的节点只能通过左/右滚动手势间歇性地向上/向下滚动。

以下是我发现的可能原因：

iframe 出现在页面上的任何位置，无论是否可见 (source) visibility: hidden 应用于可滚动节点的任何父节点 (source)

但是，这些情况都没有出现在我的网络应用程序中。在我编写的纯 CSS 模式对话框中，我有一个可滚动的 <ul>，它使用了一个巧妙的技巧来添加一个透明的底层——一个带有 position: fixed 的 ::after 伪元素。

当我从伪元素中删除position: fixed 时，问题就消失了！当然，这让我的聪明伎俩毫无用处，但有趣的是，这种情况可能会触发这个错误。

设备： 2012 iPad 3（视网膜）上的 iOS 5.1.1

违规代码：

/* Underlay */
.dialog::after 
    z-index: -1;
    position: fixed; /* <--- This was the problem! */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: rgba(0,0,0,0.4);

    content: "";

tl;dr:如果包含元素有一个固定位置的伪元素，删除它可以解决你的滚动问题。

【参考方案3】：

我知道这个问题有点老了，但我必须让我的网站在 iOS 5 上运行。不幸的是，我无法删除或替换 iframe。我注意到 iframe 的存在仅在它在要平滑滚动的元素之前呈现时才会导致问题。稍后将 iframe 附加到文档（在带有 -webkit-overflow-scrolling: touch 的元素之后）解决了问题:)