8

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

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

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

4

3 回答 3

6

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

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

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

于 2012-11-11T03:00:18.770 回答
2

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

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

  • iframe 出现在页面上的任何地方，可见或其他（来源）
  • visibility: hidden应用于可滚动节点的任何父节点（源）

但是，我的网络应用程序中不存在这些情况。<ul>我在编写的纯 CSS 模态对话框中有一个可滚动的内容，它使用了一个巧妙的技巧来添加一个透明的底层——一个::after带有position: fixed.

当我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：如果包含元素具有固定位置的伪元素，则删除它可以解决您的滚动问题。

于 2012-11-15T03:30:30.303 回答
0

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

于 2013-11-23T21:36:38.883 回答