javascript - iPad 应用程序上的动量滚动问题

Question

在我的页面上，我有两个面板，其中左侧面板包含一个堆叠在一起的元素列表，当我单击/选择其中一个元素时，有关所选元素的更多信息将显示在右侧面板中。我需要右侧面板可以滚动，因此向该面板添加了类似原生的动量滚动，如下所示 -

#rightPanel {
    position:absolute;
    top:50px;
    height:400px;
    width:500px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;  
}

要在左侧面板中的元素列表中移动，我添加了单指滑动。它工作正常，但是当我滑动下一个元素时，右侧面板已经滚动，这是不需要的。为了解决这个问题，添加了这个小例程，它会在每次滑动时将 rightPanel 内容滚动回顶部，但会有相当长的延迟，让人感觉内容加载缓慢。

var scrollStopper = function() {
if ( (swipe == 'right') || (swipe == 'left') )
    document.getElementById("rightPanel").scrollTop = 0;

document.getElementById('rightPanel').addEventListener('scroll', scrollStopper);

现在没有动量滚动，一切都按预期工作。关于如何在每次滑动时将右侧面板滚动回顶部而不造成延迟的任何想法？

Answer 1

您可能会从您的用户界面获得更快的响应:

document.getElementById('leftPanel').addEventListener('touchstart', scrollStopper);

这应该意味着只要用户与左侧面板交互，右侧面板就会快速滚动。