Creating a horizontal scroll in the iPad (preventing vertical scrolling with Hammer JS library)

Question

I'm trying to prevent vertical scrolling in a page shown inside an app. I'm looking to use Hammer JS, but I'm not sure how should I use it. I've tried several events using event.preventDefault() but it doesn't seem to work.

For example:

    $(document).hammer().on('swipeup', 'body',
        function(event)
        {
            event.preventDefault();
        }
    );

Any ideas?

Answer 1

I don't know if using Hammer JS is a requirement for you but I've had success implementing horizontal scrolling (and disabling vertical scrolling) in iOS with iScroll 4 https://github.com/cubiq/iscroll (Examples here: http://cubiq.org/iscroll-4)

When you invoke iScroll, in the options pass hScroll: true and vScroll: false, like so:

new iScroll('XYZ', { hScroll: true, vScroll: false });

Answer 2

I couldn't get it to work solely with Hammer calls, but adding this should work:

$(document).addEventListener("touchmove", function (e) { 
    e.preventDefault(); 
}, false);