Question

我正在建立一个使用swipeleft和swiperight手势来切换触摸设备上的对象的图库。当用户试图滑动并启用页面滚动时，我需要禁用页面滚动，当它变得清晰，这是用户希望的。

禁用页面滚动以获得更好的滑动体验非常简单。我只使用preventDefault()并存储坐标以供将来使用：

this.touchMove = function( event )
{
    event.preventDefault();

    this.finalCoord.x = event.targetTouches[0].pageX;
    this.finalCoord.y = event.targetTouches[0].pageY;

};

当用户通过某些公差时，问题是能够重新启动滚动条。关键的困难是在同一个触摸事件中这样做。

这是我最接近它的工作原理，但它导致滚动不稳并且（可能）阻止用户查看URL栏：

this.touchMove = function( event )
{
    event.preventDefault();

    this.finalCoord.x = event.targetTouches[0].pageX;
    this.finalCoord.y = event.targetTouches[0].pageY;

    var changeY = this.originalCoord.y - this.finalCoord.y;

    if (changeY > this.config.threshold.y || changeY < ( this.config.threshold.y * -1 ) )
    {
        var move = window.pageYOffset + changeY;

        window.scrollTo( 0, move );
    }
};

我尝试过的事情没有奏效：

有条件地致电preventDefault()。这是最明显的，但不幸的是，一旦提出防止默认，似乎没有办法否定它。
使用stopPropigation()。这不会阻止页面滚动。
使用return false。这也不会阻止页面滚动。
使用3D CSS变换来执行滚动。实际上，这有潜力，但也引起了一些引起头痛的行为。
附加透明覆盖div以劫持事件。添加div可以正常工作，但不会劫持事件。

有没有办法实现我想要的目标？

Answer 1

我通过touchSwipe plugin找到了this comment on another question。通过查看代码，我试图应用preventDefault()的方式似乎是一个逻辑问题。

无论如何，该插件完全符合我的需求。

如何使用jQuery控制移动浏览器滚动行为？

1 个答案: