Question

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

我的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');

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

Answer 1

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

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

scrollLeft使用-webkit-overflow-scrolling自动返回旧位置：触摸

1 个答案: