Can use hammer.js pan events and still allow users to scroll?

Question

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?

score 5 · Answer 1 · edited Jan 31 '15 at 11:00

5

Apply a CSS property:

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

edited Jan 31 '15 at 11:00

bummi

27,123
14
62
101

answered Jan 31 '15 at 06:48

Ashish Maradiya

113
1
8

Unfortunately, this does not work on Safari http://caniuse.com/#feat=css-touch-action – TomHastjarjanto May 06 '15 at 13:46

score 0 · Answer 2 · answered Jul 17 '14 at 11:29

0

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

answered Jul 17 '14 at 11:29

Jorik

641
5
6

Can use hammer.js pan events and still allow users to scroll?

2 Answers2