javascript - scrollLeft通过-webkit-overflow-scrolling自动返回到旧位置:

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

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

#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');

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

最佳答案

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

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

关于javascript - scrollLeft通过-webkit-overflow-scrolling自动返回到旧位置:，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13526275/