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

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

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

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

Answer 2

这是因为在iOS上的Safari中，scroll事件只会在滚动结束时触发（这意味着当您的手指在屏幕上完成移动时）。

此处已回答类似的问题：javascript scroll event for iPhone/iPad?

或者，您可以尝试使用touchSwipe plugin来检测滑动的方向和持续时间，并在滑动填充所需的阈值后立即运行该功能。

这里我在10px的距离之后触发该函数（可能应该使用更高的阈值，因为这触发真的很快 - 已经在最小的手指移动 - 但应该说明逻辑正常）：

$(document).swipe(
    {
        // touchSwipe handler triggered for every phase of the swipe. This handler is constantly fired for the duration of the pinch. This is triggered regardless of swipe thresholds.
        swipeStatus: function (event, phase, direction, distance, duration, fingers) 
        {
            // check if we swiped more than 10px to the left
            if (distance > 10 && direction == 'left') {
                document.getElementById("rightPanel").scrollTop = 0;
            } 
            // check if we swiped more than 10px to the right                
            else if (distance > 10 && direction == 'right') 
            {
                document.getElementById("rightPanel").scrollTop = 0;
            }
        }
    }
);

然而，由于我只在iPad上进行了测试，因此无法说这是非常防伪的 - 我相信它仍然需要微调，你总是可以使用相同的代码逻辑将检测结果删除为裸javascript，如果使用插件不是一种选择。

实时样本 - 还包括向上和向下滑动事件：

http://easwee.net/code-samples/touch-swipe-instant/

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

Answer 3

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

Answer 4

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

http://proton.orangehilldev.com/documentation.html

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;
        }
    });

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

4 个答案: