Question

我正在使用html5为IOS构建移动应用程序。我正在使用“-webkit-overflow-scrolling：touch”来获取原生惯性滚动，但它非常多。在滚动停止之前，我已经解决了内容未呈现的问题，但是一个持久性错误是这样的：

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

从我用Google搜索的内容来看，似乎一致认为Apple已经意识到了这个错误，并且无意在任何时候修复它。有没有人找到让-webkit-overflow-scrolling正常工作的解决方案？

Answer 1

几个月来我也一直在努力解决这个问题。我发现的最佳特征是：

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

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

Answer 2

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

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

iframe在页面上，可见或其他位置（source）
visibility: hidden已应用于可滚动节点（source）

但是，我的网络应用中没有出现这些情况。我在一个纯CSS模式对话框里面有一个可滚动的<ul>，它使用了一个聪明的技巧来添加一个透明的底层 - ::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：如果包含元素具有固定位置的伪元素，删除它可以解决滚动问题。

Answer 3

我知道这个问题有点陈旧，但我必须让我的网站在iOS 5上运行。不幸的是我无法移除或替换iframe。我注意到iframe的存在只有在它被平滑滚动的元素之前呈现时才会引起问题。稍后将iframe附加到文档中（在使用-webkit-overflow-scrolling：touch的元素之后）修复了问题：）

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

3 个答案: