[英]Prevent accidental scrolling with swipe in jQuery Mobile
I am using jQuery Mobile. 我正在使用jQuery Mobile。 When swiping left or right the user can accidentally scroll the page, frequently "bouncing" the page off the top of the window.
当向左或向右滑动时,用户可能会意外地滚动页面,经常从窗口顶部“弹跳”页面。 I want to suppress page scrolling during the left or right swipe event.
我想在左或右滑动事件期间禁止页面滚动。 I've tried:
我试过了:
$('#foo').on('swipeleft swiperight', function (ev) {
$.event.special.swipe.scrollSupressionThreshold = 100;
...
});
but this does not prevent the behavior. 但这并不妨碍这种行为。 I also tried adding
position: fixed
during the swipe event for both the html and body DOMs. 我还尝试添加
position: fixed
在滑动事件期间position: fixed
了html和body DOM。 Neither works because they alter the flow of the page. 两者都不起作用,因为它们会改变页面的流量。 How should I approach this problem?
我该如何处理这个问题? Thanks.
谢谢。
You can use a debounce function like the one I took from 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);
But you should better read into jQuery Mobile Documentation , because this is built in: 但是你应该更好地阅读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.
With Beta 2 they have released some additional swipe functionality 在Beta 2中,他们发布了一些额外的滑动功能
Configurable swipe event thresholds added
添加了可配置的滑动事件阈值
There were a number of hard-coded constants in the jquery.mobile.event.js swipe code.
jquery.mobile.event.js滑动代码中有许多硬编码常量。 For developers who need to tweak those constants to allow a greater vertical displacement and still register a swipe, this new feature allows them to be adjusted.
对于需要调整这些常量以允许更大垂直位移并仍然注册滑动的开发人员,此新功能允许对其进行调整。 Thanks to mlitwin for contributing this.
感谢mlitwin为此做出贡献。
- scrollSupressionThreshold (default: 10px) – More than this horizontal displacement, and we will suppress scrolling
scrollSupressionThreshold(默认值:10px) - 超过此水平位移,我们将禁止滚动
- durationThreshold (default: 1000ms) – More time than this, and it isn't a swipe
durationThreshold(默认值:1000毫秒) - 比这更长的时间,而不是滑动
- horizontalDistanceThreshold (default: 30px) – Swipe horizontal displacement must be more than this.
horizontalDistanceThreshold(默认值:30px) - 滑动水平位移必须大于此值。
- verticalDistanceThreshold (default: 75px) – Swipe vertical displacement must be less than this.
verticalDistanceThreshold(默认值:75px) - 滑动垂直位移必须小于此值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.