[Angular2 + HammerJS] Swipe시 스크롤이 안되는 문제 (Scrolling disabled on Hammer.js Swipe element?)

Angular2에서 swipe를 구현하기 위해 hammerJS를 사용했다.

자세한 사용법은 하단에 나와있으니 참고하면 좋다.

근데 한가지 문제가 발견됐는데, Swipe를 사용하는 영역 위에서는 페이지 스크롤이 안될수도 있다는 것이다.

문제는 저 샘플에서도 스크롤이 안된다는 것(…)

export class MyHammerConfig extends HammerGestureConfig  {
  overrides = <any>{
      'swipe': {velocity: 0.4, threshold: 20} // override default settings
  }
}

이부분에서 HammerGestureConfig를 customize화 시킬 필요가 있다.

declare var Hammer: any;

import {Inject, Injectable, OpaqueToken} from "@angular/core";

export const HAMMER_GESTURE_CONFIG: OpaqueToken = new OpaqueToken("HammerGestureConfig");

export interface HammerInstance {
  on(eventName: string, callback: Function): void;
  off(eventName: string, callback: Function): void;
}

@Injectable()
export class HammerGestureCustomConfig {
  events: string[] = [];
  overrides: { [key: string]: Object } = {};

  buildHammer(element: HTMLElement): HammerInstance {
    let mc = new Hammer(element, {
      touchAction: "pan-y",
    });
    return mc;
  }
}

이런식으로 touchAction을 pan-y를 주면된다. swipe에 대한 기본 값은 pan-x다. touchAction에 대한 자세한 내용은 여기를 참고하면 된다.

auto 로 주는 것도 가능하지만, auto로 설정할 경우,  swipe를 대각선으로 하면 페이지 스크롤도 동시에 일어나서 보기에 매끄럽지가 않다.

 

이 문제 때문에 anuglar2, hammerjs github 등에 이슈로 올라오거나 stackoverflow에 질문이 많았다.

그러나 변변한 답을 못찾아 고생을 했는데, 정답은 역시 document에 있다. 늘 그런건 아니지만.

Leave a Reply

Your email address will not be published. Required fields are marked *