v-touch not working when scrollable in mobile

Question

I'm using vue-js 2.0 and vue-touch to make swipe possible in mobile.

If I initialize my div as follows:

<v-touch v-on:swipeleft="nextDay" v-on:swiperight="previousDay" class="page-content" :style="{ height: pageHeight + 'px' }">
  <div style="overflow: auto">

    <div class="block" v-for="(listOfTypes, hours) in blocks">
      <AgendaBlock :list-of-agenda-punten='listOfTypes' :period='hours' :startsFrom7="show7"></AgendaBlock>
    </div>
  </div>

I get the following DOM in my mobile app:

If I comment overflow:auto in my inner div, my swipe functions work without any problem but scrolling doesn't work anymore. If I uncomment it, scrolling works but swiping doesn't work.

In order to avoid this problem I tried many ways to make scrolling possible using container divs but it also didn't work. What is wrong? What to do?

ps: scrolling works very well on pc with swipe, this topic is just going about making scrolling possible on mobile.

Answer 1

1. Make v-touch component empty sibling element to its content.
2. Position it absolutely full screen and add CSS pointer-events: none
3. Add to it tap event listener and toggle hide only on tap
4. On underlying content add CSS pointer-events: all and toggle show v-touch on tap.

Answer 2

I gather you want to swipe left / right and scroll up / down. Try adding overflow-y: auto to allow scrolling only on the Y axis.