Hammerjs in Safari : scroll issue

Question

I wants to allow horizontal swipe event and keep vertical scroll. So use this:

touch-action: pan-y !important;

But Safari do not support "touch-action". HammerJS preventDefaults cannot detect the "touch-action: pan-y" css, therefore it prevented the scroll.

As a result, the swipe is work nice, but cannot scroll Safari. Both swipe and scroll work on other browser which support "touch-action".

I am using angular2.

<div (swipeleft)="swipe($event)" (swiperight)="swipe($event)">

Please help! Is there any config I am missing.

Answer 1

I found a solution

1) Add this to app.module.ts

export class BaluHammerConfig extends HammerGestureConfig {
    overrides = {
        pan: {
             direction: 6
      },
      pinch: {
          enable: false
      },
      rotate: {
          enable: false
      }
  };
}

2) instead of adding HammerGestureConfig to your providers, use this:

{
    provide: HAMMER_GESTURE_CONFIG,
    useClass: BaluHammerConfig
},