6

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?

1
  • Have you ever tried the updated answer?
    – Bart Burg
    Commented May 2, 2014 at 11:11

4 Answers 4

11

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.

2
  • Hello Bart. Thanks for your answer. I finally got around to try this, but this just disables the scroll completely, which I already managed to do (I needed that for when there are no items outside the screen). I need to just disable the scroll only vertically.
    – OMA
    Commented Nov 21, 2013 at 6:55
  • Why wouldn't you just make sure the div isn't scrollable with css? (overflow-y: hidden;). You can still make the div scrollable by using the event.gesture.deltaY to know the movement of the gesture.
    – Bart Burg
    Commented Feb 1, 2014 at 10:04
1

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
});
1
  • 1
    Hi, thanks for your answer, but this doesn't seem to work to disable vertical scroll in my tests. I've tried to add event.preventDefault() inside, but still, it doesn't help.
    – OMA
    Commented Nov 21, 2013 at 6:56
1

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();
      }
 });
3
  • Problem with this is, vertical scrolling sometimes starts sideways... and the browser sometimes takes over for ever after it thinks you are scrolling.
    – Ray Foss
    Commented Sep 27, 2013 at 21:53
  • I have to say that it is common that when you start a scroll direction vertically, scrolling gets locked to vertical scrolling only. It impproves usability in my opinion.
    – Bart Burg
    Commented Oct 27, 2013 at 12:16
  • Thanks for your answer. Unfortunately this doesn't work to disable vertical scroll in my tests.
    – OMA
    Commented Nov 21, 2013 at 6:56
-2

Hammer(document.body, { prevent_defaults: true });

1
  • 1
    Wouldn't that just disable all events? (even tap events). Also, what about disabling scrolling only vertically?
    – OMA
    Commented Mar 25, 2013 at 23:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.