Prevent only horizontal scrolling mobile app

问题

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.

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()})
});

回答1:

Make page not scrollable

Something like this?

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

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
});

回答2:

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.

<!-- 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.

来源：https://stackoverflow.com/questions/16510610/prevent-only-horizontal-scrolling-mobile-app

标签

javascript

jquery

ios

mobile

hammer.js