0

-webkit-overflow-touch在 iOS Safari 上使用时遇到了一个奇怪的问题。

我确实有一个div#viewport具有以下 CSS 的：

#viewport{
    width: 1024px;
    height: 768px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

在这个 div 中，我显示的内容 ( div.page) 是水平尺寸的两倍。当用户到达终点时，他可以向左滑动以进入下一页。这是我的处理程序：

if ($('.page:visible').offset().left <= -1024){ //only change page when the page is scrolled to its end
   $('.page:visible').next('.page').buildPage().end().destroyPage(); //custom functions that DO NOT CONTAIN ANY scroll manipulation
   $('#viewport').scrollLeft(0);
}

第二行应该是“倒回”新显示的页面，以便用户可以看到新显示页面的左侧部分。这在桌面上按预期工作，但在 iOS Safari 上会发生以下情况：新页面被显示，被倒带并立即反弹回右侧（我通过动画scrollLeft而不是仅仅设置它来解决这个问题）。更奇怪的是0，我在调试时仍然得到正确的值 ( )，但显示的内容与这些不匹配。

难道我做错了什么？这是 iOS Safari 或 jQuery 中的错误scrollLeft吗？有没有另一种方法来解决这个问题？

编辑：所以我刚刚发现问题的根源似乎是当我触发我的滑动时“弹性”滚动没有完成，所以它会干扰我的scrollLeft. 当我将其包裹$('#viewport').scrollLeft(0);在超时中以确保反弹已完成时，它会按预期工作。我仍然没有关于如何解决这个问题的真正线索。动画结束时会触发事件吗？

编辑#2：所以我设法发现的是，在执行以下操作时：

$('#viewport').css('-webkit-overflow-scrolling','auto');
$('#viewport').scrollLeft(0);
$('#viewport').css('-webkit-overflow-scrolling','scroll');

我能够“欺骗”页面使其正确显示，但这会产生另一个非常奇怪的结果：当我与页面交互时，坐标会发生偏移，因此我将在可滚动页面的右侧触发事件。当我滚动时结束，坐标将是正确的。我无法手动触发滚动。

4

1 回答 1

0

所以，我发现解决这个问题的唯一方法是将每个元素包装.page在一个单独.viewport的容器中，因为每个新包装器都有自己的“动量”，因此您可以在前一页仍然存在时以编程方式滚动下一页由溢出滚动的动量控制。

虽然这解决了我的问题中描述的问题，但我遇到了另一个导致这种方法无法使用的错误，因为 iOS 直到下一次滚动才会更新其坐标。有关这方面的信息，请参阅：https ://bugs.webkit.org/show_bug.cgi?id= 90393。

于 2012-11-29T10:38:17.003 回答