hammer.js: Swipe event doesn't work in Chrome 55.0

FYI

I’ve solved my problem (Swipe not working on Chrome 56 on Android) using this

      var hammertime = new Hammer.Manager(document.querySelector('.l-main'), {
        touchAction: 'auto',
        inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
        recognizers: [
          [Hammer.Swipe, {
            direction: Hammer.DIRECTION_HORIZONTAL
          }]
        ]
      });

I think this is due to chrome making touchEvents passive by default. Ill try to find time to lookinto this and fix this week

Hi. In our app we have a relative positioned header where swipe events works fine, the next element in the DOM is a div which has the style overflow-y: auto; breaking the Hammer recognizer.

This is only when using touch - doing the swipe action with the mouse does still work!

I had a div element that needed to be scrollable up/down and swipable left/right. None of the above suggestions fixed it… What helped instead was to put

touch-action: pan-y;

to its child element and adding

const options = {
  recognizers: [
    [hammerjs.Swipe, {
      direction: hammerjs.DIRECTION_HORIZONTAL,
    }],
  ],
}

to the hammerjs manager.

Might have to look at this any further: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Strangely enough I also had issues with the swiping (and only the swiping event) on a div that had “overflow-y” set to “auto”. My Hammer was capturing directly on the body:

Hammer(document.body).on("swipe tap press", touchHandler);

adding an empty event handler to my div solved the issue and now I can scroll up and down within the div and still swipe left and right to navigate:

Hammer(document.body).on("swipe tap press", touchHandler);
Hammer(document.getElementById('myScrollableDiv')).on('swipe', function(){});

Hope this helps someone!

You can try setting { inputClass: Hammer.TouchMouseInput } Tested on Chrome and FF for android, Chrome and Safari for iOS and Chrome, FF, Safari and Opera for OSX.

@attiks I noticed this disabled swiping with the mouse on desktop view. For folks that need to support horizontal swiping on desktop and mobile devices, can try the following (this is 99% Attiks’ solution, just one minor change on my part, changing TouchInput to TouchMouseInput):

  var hammertime = new Hammer.Manager(document.querySelector('.l-main'), {
    touchAction: 'auto',
    inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchMouseInput,
    recognizers: [
      [Hammer.Swipe, {
        direction: Hammer.DIRECTION_HORIZONTAL
      }]
    ]
  });

This doesn’t seem to break anything in my project, hopefully it’s kosher. 😃

Just making @FTavukcu’s answer more generic, simply add this:

let overflowYElements = document.querySelectorAll('div.panel, aside.side-nav'); // all elements with overflow-y: auto;
for(let element of overflowYElements) {
   let hammerBug = new Hammer(element);
   hammerBug.on('swipeleft swiperight', () => {}); // passing an empty function solves this issue
}

@josex2r I’ve found a workaround, because I have the same issue as you have. Here it is:

<div data-div-with-overflow-css-property style="overflow-y: auto">...</div>

var hammered_div_with_overflow_css_property = new Hammer(document.querySelectorAll('[data-div-with-overflow-css-property]')[0]);
hammered_div_with_overflow_css_property.on('swipeleft', swipeLeftHandler);
hammered_div_with_overflow_css_property.on('swiperight', swipeRightHandler);