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?

Have you ever tried the updated answer? – Bart Burg May 02 '14 at 11:11 — Bart Burg, May 02 '14 at 11:11

Bart Burg · Accepted Answer · 2014-10-31T15:02:34.650

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.

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, Nov 21 '13 at 06: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, Feb 01 '14 at 10:04

score 1 · Answer 2 · edited Aug 05 '16 at 18:47

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

edited Aug 05 '16 at 18:47

Chad

1,531
3
20
46

answered Jun 04 '13 at 18:51

Brian Sweat

415
2
7

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 Sep 27 '13 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 Oct 27 '13 at 12:16
Thanks for your answer. Unfortunately this doesn't work to disable vertical scroll in my tests. – OMA Nov 21 '13 at 06:56

score 1 · Answer 3 · answered Aug 12 '13 at 16:44

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

answered Aug 12 '13 at 16:44

Ryan DeBeasi

256
1
6

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 Nov 21 '13 at 06:56

score -2 · Answer 4 · answered Mar 23 '13 at 12:12

-2

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

answered Mar 23 '13 at 12:12

Jorik

641
5
6

1

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

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

4 Answers4