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?

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

Solution 2

Check out this page:

https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults#evgesturestoppropagation

Try this assuming your $ is jQuery and you are using the jQuery version of hammer.js

 $('body').hammer().on('touch', function(ev){
      var $t = $(ev.target); //let's you know the exact element you touched.
      if(ev.gesture.direction === 'left' || ev.gesture.direction ==='right'){

      } else {
           ev.gesture.preventDefault();
      }
 });

Solution 3

You can use the drag_block_vertical option to disable vertical scrolling:

$(document).hammer({drag_block_vertical: true}).on('swipe,drag', 'body', function(event){
    // etc
});

Also, you're calling it on the body element, which should always exist. For that reason, you could probably simplify to:

$('body').hammer({drag_block_vertical: true}).on('swipe,drag', function(event){
    // etc
});