防止在 jQuery Mobile 中通过滑动意外滚动答案

【问题标题】：Prevent accidental scrolling with swipe in jQuery Mobile防止在 jQuery Mobile 中通过滑动意外滚动
【发布时间】：2014-04-21 18:08:48
【问题描述】：

我正在使用 jQuery Mobile。当向左或向右滑动时，用户可能会意外地滚动页面，经常将页面从窗口顶部“弹回”。我想在向左或向右滑动事件期间抑制页面滚动。我试过了：

$('#foo').on('swipeleft swiperight', function (ev) {
    $.event.special.swipe.scrollSupressionThreshold = 100;
    ...
});

但这并不能阻止这种行为。我还尝试在 html 和 body DOM 的滑动事件期间添加 position: fixed。两者都不起作用，因为它们改变了页面的流程。我应该如何解决这个问题？谢谢。

【问题讨论】：

您应该在mobileinit 中添加该行。 $(document).on("mobileinit", function () { $.event..... });。在 jQuery.js 之后和 jQM.js 之前调用它。

标签： javascript jquery jquery-mobile

【解决方案1】：

你可以使用像我从here那里得到的那样的去抖动功能

// 缩小：只有 160 字节！ function debounce(a,b,c){var d;return function(){var e=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply (e,f)},b),c&&!d&&a.apply(e,f)}} var myDebouncedFn = debounce(function() { // 你做的所有征税的事情 }, 250); window.addEventListener('swipe', myDebouncedFn);

但你应该更好地阅读jQuery Mobile Documentation，因为这是内置的：

$.event.special.swipe.scrollSupressionThreshold (default: 10px) – More than this horizontal displacement, and we will suppress scrolling.
$.event.special.swipe.durationThreshold (default: 1000ms) – More time than this, and it isn't a swipe.
$.event.special.swipe.horizontalDistanceThreshold (default: 30px) – Swipe horizontal displacement must be more than this.
$.event.special.swipe.verticalDistanceThreshold (default: 75px) – Swipe vertical displacement must be less than this.

【讨论】：

【解决方案2】：

在 Beta 2 中，他们发布了一些额外的滑动功能

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

添加了可配置的滑动事件阈值

在 jquery.mobile.event.js 刷卡代码。对于需要调整的开发人员这些常数允许更大的垂直位移并且仍然注册一个滑动，这个新功能允许他们进行调整。谢谢感谢 mlitwin 做出贡献。

scrollSupressionThreshold (default: 10px) – 超过这个水平位移，我们将抑制滚动

durationThreshold（默认值：1000 毫秒）- 比这更长的时间，而且不是滑动

horizontalDistanceThreshold (default: 30px) – 水平滑动位移一定不止于此。

verticalDistanceThreshold（默认值：75px）- 滑动垂直位移必须小于此值。

【讨论】：