Vertical scroll is not working with HammerJS and Angular2

Question

I'm having a problem using the HammerJS with Angular2. I have a carousel (based on the bootstrap carousel with Angular2 event handlers) where I'm listening to the swipe left and swipe right events. The swipe itself works perfectly. The problem is that since I use the HammerJS I can not scroll up/down over my carousel component and since it's a full viewport sized item it's a huge issue.

How can this issue be solved?

Platform:
Angular2 2.1.2
Samsung Galaxy S2 with Android 5.1.1
Google Chrome for Android: 54.0.2840.85

For example this is also not working on mobile device when trying to scroll up or down so that your finger starting point is on the image: [plunker](https://plnkr.co/edit/LCsiXOtzSedGZDbGQ3f8?p=preview) — user1511408, Dec 07 '16 at 14:17
Plz add Chrome version. "Latest stable mobile" isn't worth so much with Google pushing out a new version every month. Are you on 54 or 55? Because I just found out that 55 has a new Pointer Event api that breaks a lot of hammerjs stuff. — REJH, Dec 13 '16 at 19:46
Tested on Ionic 4 app, using Angular 8 - this [solution](https://stackoverflow.com/a/41522140/7004388) worked ;) — coderpc, Mar 12 '20 at 06:18

MrCroft · Accepted Answer · 2017-01-13T10:36:19.557

55

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

edited Jan 13 '17 at 10:36

answered Jan 07 '17 at 13:48

MrCroft

3,049
2
34
50

Hi, Thank you for your solution. I think it's working on chrome versions under 55. It works on emulator, but my phone is now on Chrome 55. Do you happen to know how can we make hammerjs work on Chrome 55? – user1511408 Jan 10 '17 at 14:25
On Surface (so, Windows) I have Chrome 55.0.2883.87 m (64-bit). But, perhaps it's a different story on Android or iOS? Let me check later after I repair my phone (I tried to put a custom ROM on my Samsung and broke it - will take a while until I figure it out and repair it) and get back to you with another comment. – MrCroft Jan 11 '17 at 11:02
@user1511408 - just tested on Chrome for Android also (v 55.0.2883.91). It works just fine. – MrCroft Jan 11 '17 at 16:01
2

@MrCroft Thank you so much. – Stefan Rein Feb 08 '17 at 15:29
I came across the same issue for UWP apps, but the above solution did not work for me. I did find a solution here though. https://github.com/hammerjs/hammer.js/issues/1014 – Matt May 15 '18 at 14:40
Finally! Someone that seems to understand the actual issue. There are so many disaster solutions to this problem out there! – Simon_Weaver Aug 28 '18 at 02:12
@Matt very curious if you know why this solution didn't work for you - I mean unless you were actually using rotate or pinch I don't see why it wouldn't. Also could you say which answer you actually used - that page is a reading project in itself! Thanks – Simon_Weaver Aug 28 '18 at 02:14
@MrCroft haha I'm not sure if this is how you figured it out, but looking at the source code for platform-browser hammer_gestures.ts shows that they explicitly *enable* these two gestures. So weird! https://github.com/angular/angular/blob/master/packages/platform-browser/src/dom/events/hammer_gestures.ts – Simon_Weaver Aug 28 '18 at 02:22
Works fine for me currently on Chrome 70,has there been a better fix as yet? – Ryann Galea Nov 16 '18 at 12:32
It seems to work, I think my browser was not refreshing right. – Mohy Eldeen Feb 15 '19 at 01:04
@MrCroft Thanks for this solution. – Syed Arshad May 06 '19 at 07:00
1

Fantastic answer! I've been struggling on this issue for a week. I'm using Ionic 4, Angular 8 and your answer worked as expected. I was using `swipeLeft` feature of _Hammer.js_ which blocked verticalScroll feature of my app. Now, I've got it work ;) – coderpc Mar 12 '20 at 06:17

Sebastian Denis · Answer 2 · 2018-10-01T08:58:11.943

9

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 {}

edited Oct 01 '18 at 08:58

answered Jun 21 '18 at 06:07

Sebastian Denis

928
10
20

1

A bit of an explanation could be beneficial here – pcnate Aug 02 '18 at 21:21
This works great for me, tested on Android Chrome 68.03440.91, latest angular 6.1 It seems that it overrides the buildHammer method to only care about pan-y direction. This way swipe and scroll can be used without problems. Thanks a lot for this. – wholenewstrain Aug 14 '18 at 17:51
What's the import needed for `new Hammer(...)` ? – Thomas Marti Sep 22 '18 at 14:58
1

@ThomasMarti import * as Hammer from 'hammerjs'; – Sebastian Denis Sep 29 '18 at 19:14
Here is my code: https://github.com/sebastiandenis/GDG-Radzymin/blob/master/src/app/app.module.ts – Sebastian Denis Sep 29 '18 at 19:14
It seems to work, I think my browser was not refreshing right. – Mohy Eldeen Feb 15 '19 at 01:02
this worked for me. the marked answer above didnt – Elazar Zadiki Jan 04 '21 at 10:17

score 3 · Answer 3 · answered Nov 27 '19 at 02:31

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!

score 1 · Answer 4 · answered Apr 18 '20 at 14:47

After 2 days of research and frustration I've found the only working solution for me:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

export class CustomHammerConfig extends HammerGestureConfig  {
    overrides = <any>{
        'pinch': { enable: false },
        'rotate': { enable: false }
    }
}


@NgModule({
// ... declarations, imports,
providers: [
        // ...
        {
            provide: HAMMER_GESTURE_CONFIG,
            useClass: CustomHammerConfig
        }
    ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}

taken from here

Nawaz Shareef · Answer 5 · 2020-05-29T17:26:30.170

1

ionic with angular 9 do not forget to add in app.module.ts


import { HammerModule } from '@angular/platform-browser';
imports: [
    ...,
    HammerModule,
  ],

edited May 29 '20 at 17:26

answered May 29 '20 at 17:16

Nawaz Shareef

23
1
7

Vertical scroll is not working with HammerJS and Angular2

5 Answers5

Linked