angular: Hammer blocking scroll

I’m submitting a … (check one with “x”)

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

If I listen for a hammer.js event on an element, it blocks vertical scrolling.

Expected/desired behavior

I would not expect scrolling to be blocked

Reproduction of the problem

Create new project with ng new my-project-of-doom
Update app.component.ts to look like this:

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
    <div *ngFor="let item of items" (swipe)="test()">
      Item #{{item.id}}
    </div>
  `,
  styleUrls: ['app.component.css']
})
export class AppComponent {

  private items: any;

  constructor() {
    this.items = [];
    for ( let i = 0; i < 500; i++ ) {
      this.items.push( {id:i} );
    }
  }

  test(){
    alert('swiping!');
  }
}

In the src/index.html file, add a script tag for Hammer.js before the end of the <head></head> block.

<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>

Execute ng serve and open the page on a mobile device (I tested on iPhone 6S)
Attempt to scroll. Observe being unable to do so.
Open ./node_modules/@angular/platform-browser/src/dom/events/hammer_gestures.js
Go to line 32, 33. Comment them out so the section looks like this:

var mc = new Hammer(element);
        //mc.get('pinch').set({ enable: true });
        //mc.get('rotate').set({ enable: true });
        for (var eventName in this.overrides) {
            mc.get(eventName).set(this.overrides[eventName]);
        }
        return mc;

Modify app.component.ts so it re-compiles.
Refresh page on mobile device, verify that scrolling can happen.

From the Hammer.js docs:

By default it adds a set of tap, doubletap, press, horizontal pan and swipe, and the multi-touch pinch and rotate recognizers. The pinch and rotate recognizers are disabled by default because they would make the element blocking, but you can enable them by calling:

Please let me know what I can do to help resolve this issue.

Thanks, Dan

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 18 (3 by maintainers)

Links to this issue

angular - Ionic 4 scroll not working properly on iOS - Stack Overflow

Most upvoted comments

@danbucholtz I’ve looked through the Hammerjs docs. Can’t figure out what/how to pass in the HammerGestureConfig in order to make vertical scrolling work. Also searched google, no luck. Even placed a small bounty on StackOverflow. Still nothing.

Could you share your HammerGestureConfig that made vertical scrolling work? This is what I’ve tried (after seeing an example of providing HammerGestureConfig), in my AppModule:

import { HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser';
// ...
export class MyHammerConfig extends HammerGestureConfig {
    overrides = <any> {
        'pinch': { enabled: false },
        'rotate': { enabled: false }
    }
}

@NgModule({
    declarations: [
        // ...
    ],
    imports: [
        // ...
    ],
    providers: [
        {
            provide: HAMMER_GESTURE_CONFIG,
            useClass: MyHammerConfig
        }
    ],
    // ...
})

Vertical scrolling still doesn’t work.

EDIT: Sorry, I’ve just Made it work. My bad. Should have been enable: false instead of enabled: false. But I can’t seem to shake the feeling that, at some point, we might need to use pinch or rotate… If this disables those events, it’s not really a solution.

+12

MrCroft on Jan 7, 2017

This works for me

Add this to app.module.ts

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

instead of adding HammerGestureConfig to your providers, use this:

{
      provide: HAMMER_GESTURE_CONFIG,
      useClass: BaluHammerConfig
},

elron on Sep 28, 2018

EDIT: I just saw (after posting the below code) that I already provided the same code above a few months ago 😃 I don’t know whether to delete this comment or not. I just never corrected the above one, from enabled: false to enable: false (but I did mention it in a later edit).

@chrillewoodz This is what works for me, in my app.module.ts:

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

Unfortunately, I haven’t found a solution that doesn’t disable pinch and rotate. I assume the enable: false completely disables any usage of those gestures.

MrCroft on May 11, 2017

Add a DI provider with an instance of HammerGestureConfig with whatever config you like.

Your question sounds like a support request.

Please use the issue tracker only for bugs and feature requests.

Use gitter and StackOverflow for support request.

vicb on Aug 5, 2016

Can someone share a working solution that allows vertical scrolling when using swipeleft and swiperight? I cannot for the life of me figure out what the config should look like. This is what I have now:

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

export class CustomHammerConfig extends HammerGestureConfig {

  public overrides = <any> {
    swipe: {
      direction: 31
    }
  };
};

How do you set the touchAction property? The app just breaks if I throw it in the same scope as swipe.

chrillewoodz on May 11, 2017

You find the codes in the documentation section API. 6 is horizontal. I also noticed some strange deltaX values and ended up only start panning if the panstart event had an absolute value of velocityX greater than an absolute value of velocityY.

perg on Nov 23, 2017

That will fix the issue for us, but I’m not so sure closing immediately is the best solution because every app that uses Hammer and binds to a hammer event cannot scroll with the default config.

Thanks, Dan

danbucholtz on Aug 5, 2016

can you provide working example.thanks

kamalakkanni on May 29, 2018