title: HammerJS swipe with Mat-Tabs blocking vertical scroll
body: <p>SO I have a component in my Angular application that has tabs for categories of data with an array of values for the content of the tab. I want to use HammerJS to swipe between the tabs for a more native experience. I have installed this virtual scroll package also: <a href="https://github.com/rintoj/angular2-virtual-scroll" rel="nofollow noreferrer">https://github.com/rintoj/angular2-virtual-scroll</a> to handle the amount of items I am preparing for the lists under each <code>mat-tab</code>. I'll start by showing the data and the markup here:</p>
  
  <p>Here is building the dummyData just to show how it is structured:</p>
  
  <pre><code>  dummyData: any[] = [];
    selectedTab: number;
  
    constructor() {
      this.selectedTab = 0;
      for (let i = 0; i &lt; 3; i++) {
        const x = {
          key: i,
          value: []
        }
        for (let j = 0; j &lt; 100; j++) {
          x.value.push(j);
        }
        this.dummyData.push(x);
      }
      console.log(this.dummyData);
    }
  </code></pre>
  
  <p>and here is the markup that loops this data to show the tabs and the lists:</p>
  
  <pre><code>  &lt;mat-tab-group dynamicHeight="true" mat-stretch-tabs [selectedIndex]="selectedTab"&gt;
      &lt;mat-tab *ngFor="let cat of dummyData" [label]="cat.key"&gt;
        &lt;ng-template matTabContent&gt;
          &lt;virtual-scroll [items]="cat.value" (update)="viewPortItems = $event" (swipeleft)="swipe($event)" (swiperight)="swipe($event)" (swipeup)="swipe($event)" (swipedown)="swipe($event)"&gt;
            &lt;p *ngFor="let item of viewPortItems; let i = index;"&gt;{{ item }}&lt;/p&gt;
          &lt;/virtual-scroll&gt;
        &lt;/ng-template&gt;
      &lt;/mat-tab&gt;
    &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p>Here is the <code>swipe($event)</code> method that is triggered for the <code>(swipedirection)</code> outputs on the <code>virtual-scroll</code> component:</p>
  
  <pre><code>  swipe(event) {
      console.log(event);
      if (this.selectedTab === 0 &amp;&amp; event.type === 'swiperight') { return; }
      if ((this.selectedTab + 1) === this.dummyData.length &amp;&amp; event.type === 'swipeleft') { return; }
      switch (event.type) {
        case 'swipeleft':
          this.selectedTab += 1;
          break;
        case 'swiperight':
          this.selectedTab -= 1;
          break;
      }
    }
  </code></pre>
  
  <p>For clarity here is my Hammer Configuration class and imports:</p>
  
  <pre><code>import * as Hammer from 'hammerjs';
  import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
  
  export class HammerConfig extends HammerGestureConfig {
    overrrides = &lt;any&gt;{
      'swipe': { velocity: 0.4, threshold: 20, direction: Hammer.DIRECTION_ALL },
      'pinch': { enable: false },
      'rotate': { enable: false }
    }
  }
  </code></pre>
  
  <p>Which is also provided: <code>{ provide: HAMMER_GESTURE_CONFIG, useClass: HammerConfig }</code></p>
  
  <p>The purpose of this is for the user to be able to swipe the screen and move between tabs, like a user would on an Android or iOS application. This setup works correctly and does in fact swipe between the tabs and loads the new data next and also virtual scrolls the data to make sure that only a set amount of items load at first. </p>
  
  <p>My problem is that this now blocks all vertical scrolling from a mobile device as Hammer sets <code>touch-action: none</code> on the <code>virtual-scroll</code> component. So I can still scroll with a mouse, but any vertical touch events do not do anything. One thing I also noticed is that the <code>(swipeup)</code> and <code>(swipedown)</code> do not trigger any event in my component code. I have also remvoed the swipeup and swipedown outputs just to make sure they aren't hindering the scroll, but still nothing when vertically dragging up or down on the screen.</p>
  
  <p>I also can confirm this doesn't have an issue with using the <code>virtual-scroll</code> package as I have tried it with a normal <code>div</code> that is not trying to lazy load the items, but just loads them all at once. Still get the same issue blocking any vertical scroll direction. Since I will be using the <code>virtual-scroll</code> as that is more important that the gestures for tabs, I want to show my example here with that in the markup.</p>
  
  <p>Anyone find a way to keep the native virtual scroll while enabling the horzontal swipe gestures?</p>
  
  <p>I appreciate any and all help here, thanks in advance!</p>