How do I disable vertical scrolling in iOS using Hammer.js?

Question

I'm trying to disable vertical scrolling in iOS with Hammer.js (jQuery version) in a horizontally scrolling list. I've tried this:

$(document).hammer().on('swipe,drag', 'body',
    function(event)
    {
        if (event.direction == Hammer.DIRECTION_UP || event.direction == Hammer.DIRECTION_DOWN) 
        {
            event.preventDefault();
        }
    }
);

But it doesn't work. So, how do I disable the scroll vertically while still being able to scroll horizontally?

Answer 1

I did it using the event.gesture.preventDefault:

$('#horizontalCarousel').hammer({ drag_lock_to_axis: true }).on("swipe drag", function(event) {
        event.gesture.preventDefault();
        if(event.type == "swipe"){
            swipeAction(event);
        } else {
            dragAction(event);
        }
 });

Here is the given documentation

[EDIT]

My answer was only to let you know you were using the wrong event.preventDefault(). In fact you also used the wrong syntax to check the event direction. You should be able to manage it in this way, though I haven't tested it:

$(document).hammer({ drag_lock_to_axis: true }).on("swipe drag", function(event) {
            if (event.gesture.direction == Hammer.DIRECTION_UP || event.gesture.direction == Hammer.DIRECTION_DOWN){
                 event.gesture.preventDefault();
            }
     });

2 things are changed: event.gesture.direction and event.gesture.preventDefault(); The event.direction was the way to do it on older versions of hammer js.

Note: if you want to do something with the swipe event, for instance: jump a bigger amount horizontally when swiping, you can combine my answers.