1

我正在制作一个使用向左滑动和向右滑动手势来切换触摸设备上的对象的画廊。当用户似乎正在尝试滑动时，我需要禁用页面滚动并在很明显这是用户希望的情况下启用页面滚动。

禁用页面滚动以提供更好的滑动体验非常简单。我只是使用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 );
    }
};

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

  1. 有条件地调用preventDefault(). 这是最明显的，但不幸的是，一旦调用 preventDefault 似乎没有办法否定它。
  2. 使用stopPropigation(). 这不会阻止页面滚动。
  3. 使用return false. 这也不会阻止页面滚动。
  4. 使用 3D CSS 变换来执行滚动。实际上，这有可能，但也引起了一些令人头疼的行为。
  5. 附加透明覆盖div以劫持事件。添加div工作正常，但它不会劫持事件。

有没有办法完成我想要做的事情？

4

1 回答 1

0

我通过对另一个问题的评论找到了touchSwipe 插件。通过查看该代码，这似乎是我尝试应用的方式的逻辑问题。preventDefault()

无论如何，该插件非常适合我的需求。

于 2012-05-17T13:56:50.847 回答