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

【问题标题】：How to control mobile browser scroll behavior with jQuery?如何使用 jQuery 控制移动浏览器的滚动行为？
【发布时间】：2023-04-01 12:20:01
【问题描述】：

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

禁用页面滚动以提供更好的滑动体验相当简单。我只是使用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()。这是最明显的，但不幸的是，一旦调用 preventDefault 似乎没有办法否定它。
使用stopPropigation()。这不会阻止页面滚动。
使用return false。这也不会阻止页面滚动。
使用 3D CSS 变换来执行滚动。实际上，这有可能，但也会导致一些令人头疼的行为。
附加透明覆盖div 以劫持事件。添加 div 可以正常工作，但不会劫持事件。

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

【问题讨论】：

标签： jquery mobile scroll swipe

【解决方案1】：

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

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

【讨论】：