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

在我的页面上，我有两个面板，其中左侧面板包含相互叠置的项目列表，当我单击/选择其中一个项目时，有关所选项目的详细信息将显示在右侧面板中。我需要右面板是可滚动的，所以添加了像本机一样的动量滚动到此面板，如下所示-

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

为了浏览左侧面板中的项目列表，我添加了单手指滑动。它工作正常，但当我刷下一个项目时，右面板已经滚动，这是不需要的。为了解决这个问题，添加了这个小程序，它会在每次刷卡时将右面板内容卷回顶部，但有相当大的延迟，这使它感觉内容加载缓慢

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

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

---

现在，如果没有动力滚动，事情会按预期进行。关于如何在每次滑动时将右面板滚动回顶部而不造成延迟，您有什么想法吗？

您可以通过以下方式从UI获得更快的响应：

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

---

这应该意味着，一旦用户与左侧面板交互，右侧面板将捕捉其滚动

之所以会发生这种情况，是因为在iOS上的Safari中，

scroll

事件只会在滚动结束时触发（这意味着当您的手指在屏幕上完成移动时）

这里回答了一个类似的问题：

或者，您可以尝试使用来检测刷卡的方向和持续时间，并在刷卡已填充所需的treshold后立即运行该功能

在这里，我在10px的距离后启动函数（可能应该使用更高的treshold，因为触发速度非常快-手指移动已经很小了-但是应该很好地说明逻辑）：

然而，我不能说这真的是防弹的，因为我只在iPad上测试过——我相信它仍然需要微调，如果使用插件不是一种选择的话，你可以使用相同的代码逻辑将检测剥离到裸javascript

实时示例-还包括上下滑动事件：

---

（在滑动时更改颜色-红色=左侧，蓝色=右侧，绿色=向上，橙色=向下）

要在ios上保持本机滚动活动，请将要滚动的元素放置在父元素具有溢出css的子元素中

如果您喜欢我在这里实施的解决方案：

CSS部分没有那么复杂，你可以用浏览器检查器检查它，或者如果你自己不能弄清楚的话，我可以稍后发布。至于JS，我使用的是：

// Disables scroll except for allowed elements that prevent touchmove event propagation
    $(document).on('touchmove', function(event){
        event.preventDefault();
    });
    // Elements which are allowed touchmove event (by stopping event propagation to document)
    $('body').on('touchmove','.scrollable, nav', function(event) {
        event.stopPropagation();
    });
    // Prevents scrollable elements from ever reaching the end of scroll, and thus prevents scroll overflow on ipad
    $('body').on('touchstart','.scrollable', function(event) {
        if (event.currentTarget.scrollTop === 0) {
            event.currentTarget.scrollTop = 1;
        }
        else if (event.currentTarget.scrollHeight === event.currentTarget.scrollTop + event.currentTarget.offsetHeight) {
            event.currentTarget.scrollTop -= 1;
        }
    });

---

退房这是一个轻量级的触摸/手势库，您可以使用它来检测滑动，而不是滚动事件（直到动量耗尽才会触发）。这应该可以消除延迟。没有jQuery标签，请只提供纯JS解决方案。没有jQuery标签，请只提供纯JS的解决方案。jQuery也是用纯JS编写的：）我已经参与了十几个支持iOS的web项目，使用“纯”JS时，速度绝对没有明显差异。我也非常反对任何像“我只使用纯JS”这样的精英言论。这就像说C很慢，我只使用汇编。但是OP没有指定他们使用的是jQuery，所以这不是一个有效的响应。尤其是如果他们当前的代码没有使用jQuery，我相信使用jQuery的答案将非常有用，因为它是一个无可否认地被利用的库。但是我同意如果OP要求纯javascript，我们应该尽最大努力用纯javascript提供至少一个答案。谁知道呢，也许jQuery会让OP的生活更轻松。如果您想要纯javascript，请查看以下内容：

// Disables scroll except for allowed elements that prevent touchmove event propagation
    $(document).on('touchmove', function(event){
        event.preventDefault();
    });
    // Elements which are allowed touchmove event (by stopping event propagation to document)
    $('body').on('touchmove','.scrollable, nav', function(event) {
        event.stopPropagation();
    });
    // Prevents scrollable elements from ever reaching the end of scroll, and thus prevents scroll overflow on ipad
    $('body').on('touchstart','.scrollable', function(event) {
        if (event.currentTarget.scrollTop === 0) {
            event.currentTarget.scrollTop = 1;
        }
        else if (event.currentTarget.scrollHeight === event.currentTarget.scrollTop + event.currentTarget.offsetHeight) {
            event.currentTarget.scrollTop -= 1;
        }
    });