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

Question

我正在使用html5为iOS构建移动应用程序。我正在使用“-webkit-overflow-scrolling: touch”来获得本机惯性滚动，但它非常有错。我已经解决了内容在滚动停止之前不会呈现的问题，但是一个持久的错误是：

当我尝试上下滚动时，什么也不会发生，但是当我尝试水平滚动时，内容会垂直滚动（偏离90度）。如果我在应用程序中导航并返回页面，则有时会修复此错误。此外，有时尽管充满内容，但根本无法滚动。

从我所搜索到的资料来看，人们普遍认为苹果公司已经意识到这个错误，并且没有打算在短期内修复它。有人找到了解决方法使“-webkit-overflow-scrolling”正常工作吗？

- doubledriscoll

---

同样遇到了这个问题。目前还没有找到解决方法。 - BishopZ

Answer 1

我也曾经为这个问题苦苦挣扎了几个月。我找到的最好描述是：https://bugs.webkit.org/show_bug.cgi?id=87391。当网页有 iFrame 并且通过 Javascript 设置内容时，就会发生这种情况。在我的版本 1.6 的 The Graphics Codex 中，我的临时解决方法是使用 iScroll4 来显式滚动页面，而不是使用触摸滚动。因为 JavaScript 是单线程的，如果同时进行动画或后台加载内容，这可能会很慢。

- user1615357

---

我最终使用了iScroll4。虽然不是理想的选择，但它确实比iOS更好地模拟了滚动效果。提示：我还通过将transform3d样式设置为0,0,0来使滚动区域的内容硬件渲染。这样它们就会被预先渲染，如果有大量内容，就不会出现抖动的滚动效果。 - doubledriscoll

我在使用jQuery Dialogs滚动时也遇到了同样的问题，在iOS上。插件并不是一个好的解决方案，而且仍然表现得有些奇怪。 - Jason

Answer 2

我遇到了同样的问题：一个节点使用-webkit-overflow-scrolling:scroll，只有左/右滚动手势时会间歇性地上下滚动。以下是我发现可能原因：

• 页面中存在iframe，无论是否可见（来源）
• 将visibility:hidden应用于可滚动节点的任何父节点（来源）

然而，在我的Web应用程序中没有出现这些情况。我编写了一个纯CSS模态对话框，其中包含可滚动的<ul>，使用巧妙的技巧添加了透明的底图 -- 一个带有position:fixed的::after伪元素。

当我从伪元素中删除position:fixed时，问题就解决了！当然，这使我的聪明技巧变得无用，但有趣的是可以通过这种情况触发此错误。 设备: iPad 3 (retina) 2012年版 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: "";
}

简而言之：如果包含的元素有一个固定位置的伪元素，删除它可能会解决您的滚动问题。

- lazd

Answer 3

我知道这个问题有点老了，但我必须让我的网站在iOS 5上正常工作。不幸的是，我无法删除或替换iframe。我注意到只有在iframe在应该平稳滚动的元素之前呈现时，它的存在才会导致问题。将iframe附加到文档后（在具有-webkit-overflow-scrolling：touch的元素之后），问题得到解决：）

- kaapa