Hammer.js: Changing touch-action from auto to none during gesture

[nicokruger]

I'm trying to change touch-action from auto to none on a two finger press gesture, which then leads (hopefully) to a pan.

Reason being is I have a canvas - and I would like the user to be able to drag the canvas both horizontally and vertically. I set touch-action to auto by default to allow vertical scrolling. But I want the touch-action to change to none when the user presses with two fingers, so that then when they drag with two fingers the drag is done on the canvas and the page is not scrolled.

Hope that makes sense.

It sort of works - but it seems as though the browser is reluctant to reliably pickup the change from 'auto' to 'none' on touch-action - it still wants to scroll the page.

This is all on Chrome on Android by the way.

Hope I'm explaining this well enough. It basically comes down to as though trying to change touch-action during active gesture(s) seems to be buggy. Not sure if this is Chrome's fault, my fault, hammerjs's fault or what.

Thanks

[coder89]

I am struggling with a similar problem. Have you gotten this to work yet?

In my case I have objects drawn on the canvas. When user touches them I want to recognize it as pan gesture. If user touches empty area of the canvas I want the touch event to be handled by the browser (page scroll by default).

Any help with this would be greatly appreciated. :)

[mokkymiah]

@nicokruger Did you find a solution for this?

[nicokruger]

Nope, we basically gave up, and made sure to fit the canvas and surrounding on the screen, thus requiring no scrolling of the page. Sorry to dissapoint!

[mokkymiah]

@nicokruger That's unfortunate. Anyways, we solved this yesterday on our angularjs project.

This is what we did for anyone else that has this issue - hope it helps!;

• Set the following config on our hammer element.

 this._element = new Hammer(this.$element[0], {
            inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
            touchAction: 'auto',
        });

Notice we set touchAction to auto.

When the relevant gesture is triggered, we applied a css class to the element, that would set the touch-action to none.

 this._element.on('panmove panstart', event => {
        this._element.addClass('is-dragging');
    }
);

    .is-dragging {
        touch-action: none !important;
    }

[VahidPouyafar]

Hello, @mokkymiah
I hope you read my comment soon!
I've got a problem and I've posted a question on stack overflow.
Searching for a solution to my question I found this post and I tried your solution but it doesn't work. Here's a sample code on codepen. In the sample code there's a div and when the _"touchmove"_ event fires I add a class to the div element in which I set touch-action: none but it doesn't work. What am I missing? Note: By testing I realized on codepen if you swipe your finger horizontally then vertically it doesn't scroll the page. It seems this is specific to codepen editor, Because when I try the same on my local file on mobile I can still scroll.

Update: I fixed my own problem with preventDefault(). If you're issue is the same is the issue opened here I think you can fix it using preventDefault(). You might read my question if helps.