hammerjs / hammer.js

A javascript library for multi-touch gestures :// You can touch this
http://hammerjs.github.io
MIT License
24.13k stars 2.62k forks source link

hammer.js Conflicting with Vertical Scrolling on chrome (mobile) #1173

Open Robzhavas opened 6 years ago

Robzhavas commented 6 years ago

i added hammer.js to detect the swiping direction, I user only the left and right detectors "direction == 'right', direction == 'left' ". Its working fine but when you swipe up and down on mobile, it doenst scroll anymore. (if your finger is on the div where i'm using hammer.js). How can i make it stop conflicting ?

ericgruby01 commented 6 years ago

Can you show more of your code?

I had this issue too, but managed to fix using:

var element = document.querySelector('.swipe-this');
var manager = new Hammer.Manager(element);
var Swipe = new Hammer.Swipe({
    direction: 6
});
manager.add(Swipe);
manager.on('swipeleft', function (e) {
  // do something when swipe left
});
manager.on('swiperight', function (e) {
  // do something when swipe right
});

The direction property, as you can imagine, limits the swipe direction.

6 = DIRECTION_HORIZONTAL - Reference.

Haukez commented 2 years ago

The config must be set to direction: 6. In vue I would do

  import { VueHammer } from 'vue2-hammer';
  import Vue from 'vue';
  VueHammer.config.swipe = {
      direction: 6
  };
  Vue.use(VueHammer);

Thanks ericgruby01 for letting me know about the numbers for the constants.