Vue-touch with lateral swipe prevents vertical scrolling

[pmioni]

Hi, I have included Vue-touch 2.0.0-beta.4 in a Vue 2 project. Code looks like this: `<v-touch tag="div" v-on:swiperight="prev" v-on:swipeleft="next" v-bind:swipe-options="{threshold: 70}" class="modelgalleryimages" :class="{ 'loading-background-gallery' : loading || imageLoading }">

</v-touch>`

It is an image gallery. Swiping laterally through the images works fine, but it prevents normal vertical scrolling when one tries to drag on the image. It seems that the underlying Hammer.js library has the same problem, and I haven't find a clear solution to it. I tried adding touchAction: "auto" to the options, as some suggested for Hammer.js, but it did not work. Could you please provide any suggestions / fixes?

[admilne]

I had a similar issue with the app I am building, although I had the opposite problem. Giving something the ability to scroll using overflow:scroll meant I could no longer swipe side to side. I got around it using v-on:panleft and v-on:panright instead. Perhaps that would work for you?

[FPierre]

VueTouch.config.swipe = {
  direction: 'horizontal'
}

fix the issue for me

[pmioni]

@FPierre , it works for me. Thank you very much. @yyx990803, it would be more streamlined to be able to pass this configuration directly in Vue.use() Would you accept a pull request?

[LinusBorg]

Sure, PRs are welcome.

[gustavoquinalha]

@FPierre thanks, this works for me

[ghost]

@FPierre Thanks, works like a charm.

This information should be in the frontpage of the plugin i think.

Cheers.

[suprabhasupi]

I was facing the same issue with pan. This solved my problem: VueTouch.config.pan = { direction: 'horizontal' } Please someone add in documentation as well.

Thanks.

[liefswanson]

Just as a note the proposed solutions set the configuration direction: 'horizontal' for every swipe in the entire application.

If you just wanted to disable hammer stealing your vertical swipes for a single element (say you put a v-touch on the root div of your App.vue so you could pop out a navbar?) you should configure direction on that element

<v-touch @swiperight='enableNav'
         @swipeleft='disableNav'
         :swipe-options="{
             direction: 'horizontal'
         }">

Doing this will allow direction: 'vertical' to still work globally in the case that you wanted it just for a few elements in your app, but not everywhere.

It may also work to do the inverse setting the swipe options individualy to allow direction: 'vertical', but I didn't try that.