Hammertime vertical scroll not working

Question

I am using Hammerjs/Hammertime

to implement a swipe feature on mobile and can't seem to get it to work with vertical scrolling. Works fine when I swipe horizontally. Here is my code:

          var resim = jQuery(".perks-carousel-cont li");

            resim.hammer().on("swipe", function(ev) {
                var targetLi = this;
                animateLisMob(targetLi);
            });

I believe Hammertime (which adds onto hammer js) does not come with vertical scrolling enabled, just horizontal. After looking into the issue the following line of code should fix it:

hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

When I implement this tough I get a hammertime is not defined console error. To define Hammerstime as per their documentation i've tried adding this with no options parameter:

var hammertime = new Hammer(resim);

But then I get an error:

Uncaught TypeError: a.addEventListener is not a function

Not sure where i've gone wrong here..

Answer 1

The swipe gesture recognizer makes hammer apply the touch-action: pan-y css property to the DOM node its on,

This basically tells the browser to ignore all vertical gestures and you get no vertical scrolling.

To fix that simply specify in hammer's options {touchAction: 'auto'}, without jQuery it looks like that:

var hammertime = new Hammer(domElement, {touchAction: 'auto'});

hammertime.on('swipe', function(ev) {
    var targetLi = this;
    animateLisMob(targetLi);
});