Vertical scroll is not working with HammerJS and Angular2 Vertical scroll is not working with HammerJS and Angular2 angular angular

Vertical scroll is not working with HammerJS and Angular2


Got it!

In your AppModule:

import { HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser';export class MyHammerConfig extends HammerGestureConfig {    overrides = <any> {        'pinch': { enable: false },        'rotate': { enable: false }    }}@NgModule({    declarations: [        // ...    ],    imports: [        // ...    ],    providers: [        // ...        {            provide: HAMMER_GESTURE_CONFIG,            useClass: MyHammerConfig        }    ],    bootstrap: [ AppComponent ]})export class AppModule {}

Now vertical scrolling works, after disabling pinch and rotate.Couldn't find any other way so far. I'm not sure what happens to the pinch and rotate events (I mean they would be disabled, I think). But even without this config, attaching a (pinch)="onPinch($event)" - didn't do anything anyway.

Angular version in my project: 2.4.1

Tested on:

  • Chrome for Windows (on a Surface, so real touchscreen - not just emulated) v 55.0.2883.87 m (64-bit)
  • Chrome for Android - v 55.0.2883.91


This solution works for my Chrome 66 (Angular 6 app). Scrolling is enabled, swipe right/left works also:

import {  HammerGestureConfig,  HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';import * as Hammer from 'hammerjs';export class MyHammerConfig extends HammerGestureConfig {  buildHammer(element: HTMLElement) {    const mc = new Hammer(element, {      touchAction: 'pan-y'    });    return mc;  }}@NgModule({    declarations: [        // ...    ],    imports: [        // ...    ],    providers: [        // ...        {            provide: HAMMER_GESTURE_CONFIG,            useClass: MyHammerConfig        }    ],    bootstrap: [ AppComponent ]})export class AppModule {}


Like a few other answers have mentioned in

npm install hammerjs --save

maint.ts

import 'hammerjs';

app.module

import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';...export class HammerConfig extends HammerGestureConfig {  overrides = <any> {      'pinch': { enable: false },      'rotate': { enable: false }  }}...  providers: [    {      provide: HAMMER_GESTURE_CONFIG,      useClass: HammerConfig    }],...

I tried a million variations of the configuration and scrolling still did not work when I tested in chrome, I dont know if its the version or what but it did not work. When I tested in an actual mobile phone scrolling was working!