Hammer blocking scroll #10541

danbucholtz · 2016-08-05T19:57:28Z

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

The text was updated successfully, but these errors were encountered:

vicb · 2016-08-05T20:25:23Z

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.

danbucholtz · 2016-08-05T20:29:25Z

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

vicb · 2016-08-05T21:22:34Z

Could you please check the doc (angular.io) and if nothing is mentioned there then create a ticket on https://github.com/angular/angular.io ?

Thanks for your help

NgxDev · 2017-01-07T13:13:55Z

@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.

chrillewoodz · 2017-05-11T11:07:59Z

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.

NgxDev · 2017-05-11T11:26:58Z

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.

calbear47 · 2017-05-22T19:37:20Z

@chrillewoodz Did you figure this out? I'm experiencing the same dilemma and have yet to figure out a solution.

CSchulz · 2017-09-11T10:04:41Z

I got the best results with following HammerGestureConfig:

@Injectable()
export class HammerGestureConfig {
  events: string[] = [];

  overrides: {[key: string]: Object} = {};

  buildHammer(element: HTMLElement): HammerInstance {
    return new Hammer(element, {
      cssProps: Hammer.defaults.cssProps,
      recognizers: [
        [Hammer.Swipe],
        [Hammer.Tap],
      ],
    });
  }
}

or you build the Hammer instance manually in your class. Then you have better control about the recognizers which needs to be registered and there is no global configuration for all manager instances.

If you want to use the events on Desktop as well, it seems to work better when the touchemulator is also imported.

artuska · 2017-11-22T13:12:00Z

+1 for this issue — I cannot scroll mobile page if I start moving the finger on Hammer container — it just prevents the page from scrolling.

For example, here is my Hammer container:

<div class="instagram-carousel" (panstart)="panStart()" (panleft)="panLeft($event)" (panright)="panRight($event)" (panEnd)="panEnd()">
   ...
</div>

Nothing above helps, I made this config, but it does not solve the vertical scroll problem:

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

perg · 2017-11-22T18:41:52Z

does it help with
pan {direction: 6}

artuska · 2017-11-22T19:39:24Z

@perg where can i get all the codes? It works with any code — if i use 6 it enables vertical pan and i can scroll the page... but it breaks horizontal pan — (panleft) event is fired with some very strange deltaX and deltaY values...

perg · 2017-11-23T06:25:06Z

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.

artuska · 2017-11-23T08:40:24Z

@perg thank you, i did the same and it works :)

kamalakkanni · 2018-05-29T10:34:13Z

can you provide working example.thanks

elron · 2018-09-28T23:32:39Z

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

gtsopour · 2018-10-08T11:50:59Z

Hello @perg @artuska @elron ,
I have the following configuration, vertical scrolling is ok in swipable area but I cannot slide in my MatSlider Component anymore. Any idea?

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

{provide: HAMMER_GESTURE_CONFIG, useClass: HammerConfig}

elron · 2018-10-08T18:09:21Z

@gtsopour a quick guess would be to add

      pan: {
          direction: 6
      },

Try this and let us know if it worked for you

angular-automatic-lock-bot · 2019-09-14T02:53:19Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

danbucholtz mentioned this issue Aug 5, 2016

Gesture like (swipe)... prevent vertical scroll ionic-team/ionic-framework#6897

Closed

vicb closed this as completed Aug 5, 2016

peterpeterparker mentioned this issue Aug 9, 2018

[Ionic v4] Hammer disappeared ionic-team/ionic-framework#14883

Closed

This was referenced Jul 28, 2019

fixed vertical scrolling on mobile issue with 3 steps. gbrlsnchs/material2-carousel#22

Merged

Vertical scrolling not working on mobile devices gbrlsnchs/material2-carousel#9

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hammer blocking scroll #10541

Hammer blocking scroll #10541

danbucholtz commented Aug 5, 2016 •

edited

Loading

vicb commented Aug 5, 2016

danbucholtz commented Aug 5, 2016 •

edited

Loading

vicb commented Aug 5, 2016

NgxDev commented Jan 7, 2017 •

edited

Loading

chrillewoodz commented May 11, 2017

NgxDev commented May 11, 2017 •

edited

Loading

calbear47 commented May 22, 2017

CSchulz commented Sep 11, 2017 •

edited

Loading

artuska commented Nov 22, 2017 •

edited

Loading

perg commented Nov 22, 2017

artuska commented Nov 22, 2017 •

edited

Loading

perg commented Nov 23, 2017

artuska commented Nov 23, 2017

kamalakkanni commented May 29, 2018

elron commented Sep 28, 2018

gtsopour commented Oct 8, 2018 •

edited

Loading

elron commented Oct 8, 2018

angular-automatic-lock-bot bot commented Sep 14, 2019

Hammer blocking scroll #10541

Hammer blocking scroll #10541

Comments

danbucholtz commented Aug 5, 2016 • edited Loading

vicb commented Aug 5, 2016

danbucholtz commented Aug 5, 2016 • edited Loading

vicb commented Aug 5, 2016

NgxDev commented Jan 7, 2017 • edited Loading

chrillewoodz commented May 11, 2017

NgxDev commented May 11, 2017 • edited Loading

calbear47 commented May 22, 2017

CSchulz commented Sep 11, 2017 • edited Loading

artuska commented Nov 22, 2017 • edited Loading

perg commented Nov 22, 2017

artuska commented Nov 22, 2017 • edited Loading

perg commented Nov 23, 2017

artuska commented Nov 23, 2017

kamalakkanni commented May 29, 2018

elron commented Sep 28, 2018

gtsopour commented Oct 8, 2018 • edited Loading

elron commented Oct 8, 2018

angular-automatic-lock-bot bot commented Sep 14, 2019

danbucholtz commented Aug 5, 2016 •

edited

Loading

danbucholtz commented Aug 5, 2016 •

edited

Loading

NgxDev commented Jan 7, 2017 •

edited

Loading

NgxDev commented May 11, 2017 •

edited

Loading

CSchulz commented Sep 11, 2017 •

edited

Loading

artuska commented Nov 22, 2017 •

edited

Loading

artuska commented Nov 22, 2017 •

edited

Loading

gtsopour commented Oct 8, 2018 •

edited

Loading