仅防止水平滚动移动应用 [英] Prevent only horizontal scrolling mobile app

问题描述

我正在开发一个网络应用程序。左侧是使用Sidr插件的侧边栏（ jQuery插件：Sidr ）。测试站点位于我的开发服务器上。我的问题是，如果我从左向右滑动，则会显示侧边栏。这是非常好的。但是，如果我想通过从右向左滑动来关闭侧边栏，我必须通过添加以下代码来阻止滚动：

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:

$('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.

这是我的完整JavaScript：

Here's my complete 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()})
});

推荐答案

让页面不可滚动

这样的东西？

我认为使用$（文件）会更好！

I think that using $(document) would be better!

参考：防止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
});

这篇关于仅防止水平滚动移动应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！