javascript 仅防止水平滚动移动应用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16510610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent only horizontal scrolling mobile app
提问by Jan Andrè Schl?sser
I'm developing an web app. On the left side is an sidebar using the Sidr-plugin (jQuery Plugin: Sidr). The test site is on my developing server. My problem is that if I'm swipe from left-to-right the sidebar is displayed. That's very good. But if I want to close the sidebar by swiping from right-to-left I must prevent the scrolling by add this following code:
我正在开发一个网络应用程序。左侧是一个使用 Sidr 插件（jQuery 插件：Sidr）的侧边栏。测试站点在我的开发服务器上。我的问题是，如果我从左向右滑动，则会显示侧边栏。这是非常好的。但是如果我想通过从右向左滑动来关闭侧边栏，我必须通过添加以下代码来防止滚动：
$('body').bind('touchmove', function(e){e.preventDefault()})
I did that, but now: My navigation in the top of the page (menu) doesn't work fine. I can't scroll until to the end.
我这样做了，但现在：我在页面（菜单）顶部的导航无法正常工作。我不能滚动到最后。
So my question is: How can I change this. It should only prevent the vertical Scrolling if I'm going to close the Sidebar on the left.
所以我的问题是：我该如何改变这一点。如果我要关闭左侧的侧边栏，它应该只会阻止垂直滚动。
Here's my complete JavaScript:
这是我完整的 JavaScript：
$(function(){
$(document).foundation();
$('#sidebar-toggle').sidr();
var hammertime = Hammer(document.getElementById("wrapper")).on("swiperight", function(event) {
$.sidr('open');
});
var hammertime = Hammer(document.getElementById("wrapper")).on("swipeleft", function(event) {
$.sidr('close');
});
var hammertime = Hammer(document.getElementById("content")).on("tap", function(event) {
$.sidr('close');
});
$('body').bind('touchmove', function(e){e.preventDefault()})
});
采纳答案by Niccolò Campolungo
Something like this?
像这样的东西？
I think that using $(document) would be better!
我认为使用 $(document) 会更好！
Reference: Prevent horizontal scroll on jQuery Mobile
var lastY;
$(document).bind('touchmove', function (e){
var currentY = e.touches[0].clientY;
if (currentY !== lastY){
// moved vertically
return;
}
lastY = currentY;
//insert code if you want to execute something when an horizontal touchmove is made
});
回答by Syed Priom
I was trying to integrate Sidr with Hammer JS but there is conflict, so I got rid of Hammer and used the code below, which uses TouchWipe JS combined with Sidr JS.
我试图将 Sidr 与 Hammer JS 集成但存在冲突，所以我摆脱了 Hammer 并使用下面的代码，它使用 TouchWipe JS 与 Sidr JS 相结合。
<!-- Swipe to open or close mobile menu -->
<script>
jQuery(window).touchwipe({
wipeLeft: function() {
// Close
jQuery.sidr('close', 'sidr-main');
},
wipeRight: function() {
// Open
jQuery.sidr('open', 'sidr-main');
},
preventDefaultEvents: false
});
</script>
I guess the problem you are facing with right-to-left swipe should be fixed.
我想应该解决您从右向左滑动所面临的问题。
