使用jQuery Mobile中的滑动防止意外滚动

时间:2014-04-21 18:08:49

标签: javascript jquery jquery-mobile

我正在使用jQuery Mobile。当向左或向右滑动时,用户可能会意外地滚动页面,经常"弹跳"页面顶部的页面。我想在左或右滑动事件期间禁止页面滚动。我试过了:

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

但这并不妨碍这种行为。我还尝试在滑动事件期间为html和body DOM添加position: fixed。两者都不起作用,因为它们会改变页面的流量。我该如何处理这个问题?感谢。

2 个答案:

答案 0 :(得分:1)

你可以使用像我从here

那样的去抖动功能
// Minified: only 160 bytes!
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() {
 // All the taxing stuff you do
}, 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.

答案 1 :(得分:1)

使用Beta 2,他们已经发布了一些额外的滑动功能

  

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

     

有许多硬编码的常量   jquery.mobile.event.js滑动代码。对于需要调整的开发人员   这些常数允许更大的垂直位移并且仍然存在   注册滑动,这个新功能允许他们进行调整。谢谢   给mlitwin做贡献。

     
      
  • scrollSupressionThreshold(默认值:10px) - 超过此水平   置换,我们将禁止滚动
  •   
  • durationThreshold(默认值:1000毫秒) - 比此更长的时间,而且不是滑动
  •   
  • horizo​​ntalDistanceThreshold(默认值:30px) - 水平滑动   位移必须超过这个。
  •   
  • verticalDistanceThreshold(默认值:75px) - 滑动垂直位移必须小于此值。
  •