I have a UI where users are scrolling a horizontally scrolling area.

I still want them to be able to scroll left and right, but I'd like to fire an Hammer.js pan event at the same time. Here's my code at present:

var worksHammertime = new Hammer(scrollingArea);
worksHammertime.on('pan', function(ev) {
  if ( ev.direction === 2 ) {
    log('left', ev)
    Do things...
  } else {
    log('right', ev)
    Do things...
  }
});

Essentially I think I'm looking for the opposite of the preventDefault()behaviour that Hammer seems to use by default. Can use hammer.js pan events and still allow users to scroll?

I have a UI where users are scrolling a horizontally scrolling area.

I still want them to be able to scroll left and right, but I'd like to fire an Hammer.js pan event at the same time. Here's my code at present:

var worksHammertime = new Hammer(scrollingArea);
worksHammertime.on('pan', function(ev) {
  if ( ev.direction === 2 ) {
    log('left', ev)
    Do things...
  } else {
    log('right', ev)
    Do things...
  }
});

Essentially I think I'm looking for the opposite of the preventDefault()behaviour that Hammer seems to use by default. Can use hammer.js pan events and still allow users to scroll?

• javascript
• hammer.js
• touch-event

2 Answers 2

Apply a CSS property:

#touch-area
{
touch-action: pan-x pan-y !important;
}

This currently isn't supported, but you could try to do this with a nested element containing style="overflow: auto;"