vendredi 31 mars 2017

swipe handled by ember-gestures, but also scrolls

I've creates a "touch-list" component for EmberJS, based on ember-collection, with ember-gestures mixed in:

import RecognizerMixin from 'ember-gestures/mixins/recognizers';

export default Ember.Component.extend(RecognizerMixin, {
  recognizers: 'tap press swipe',
...
  swipeLeft(event) {
...
    event.preventDefault();
    event.stopPropagation();

  },
...

My test app has two panels, one for the list and the other for item details. (Slighly out-of-date source code is on GitHub.) On a screen 640px or wider, the container for the panels is set to the viewport width, and all is well - horizontal swipes are recognized, and don't trigger scrolling.

On a screen 639px or narrower, I set the container to twice the viewport width, and each panel to the viewport width. Horizontal swipes on the list header or detail panel scroll, as expected.

The problem is horizontal swipes on list items on touchscreen devices. They are recognized as gestures, and handled by list items, but they also cause horizontal scrolling! As seen above, I call event.preventDefault(); and event.stopPropagation(); but that doesn't help.

How can I prevent swipes from causing horizontal scrolling?




Aucun commentaire:

Enregistrer un commentaire