How to fix Chrome 35 and IE10 scrolling (touch action)

This WIKI is for the 1.1 version. For the 2.0 documentation, go to the website.

Recent versions of Chrome and IE support the touch-action css property. This property tells the browser how to handle touches on the given element, and prevents the default behavior (scrolling in most cases). Until Hammer 1.1.3, the default setting was set to none. This causes the element to block scrolling in these browsers. The new default value is pan-y, which prevents all default browser behavior for horizontal touch-movements.

Chrome 35 has placed the support for the touch-action property currently as a setting on chrome://flags/#enable-experimental-web-platform-features, but it will become enabled at version 36. Also Firefox is going to support this, and maybe even WebKit someday.

Related links:

• Chromium Issue 372357: Scrolling broken due to touch-action support on sites using hammer.js library
• Touch-action property

Should I update the default setting?

In short: yes, you should.

When using Hammer on small elements, this doesn't matter a lot. It still can be annoying that your page blocks scrolling, but it becomes a bigger issue when you have covered a large area (like the body) with an Hammer instance.

You can try and experience how big the impact is by installing Chrome 35 Beta on your Android device, or try it on a Windows 8 touch device.

How do I change it for all instances?

You can also just update to the latest 1.1.x version, or if you're on the 1.0.x version, you can find the updated code over here. Don't know what version you are running? If you haven't updated Hammer since the end of April, it is 1.0.x.

If you don't feel like updating to the latest version, you can change the setting in code, but you can also do this before creating an instance by changing the touchAction value.

For Hammer 1.0.x: Hammer.defaults.stop_browser_behavior.touchAction = 'pan-y';

And the recent Hammer 1.1.x: Hammer.defaults.behavior.touchAction = 'pan-y';

Example changing the default value

<script src="hammer.js"></script>
<script>
// enable only vertical scrolling on browsers that support touch-action
// for 1.0.x this is at the stop_default_behavior object
Hammer.defaults.behavior.touchAction = 'pan-y';
   
// ...your hammer code...etc...
var mc = new Hammer(document.body);
</script>

Example changing the value for an instance

<script src="hammer.js"></script>
<script>
// clone the default behavior object
// for 1.0.x this is at the stop_default_behavior object
var myCustomBehavior = Hammer.utils.extend({}, Hammer.defaults.behavior);
myCustomBehavior.touchAction = 'pan-y';

var mc = new Hammer(document.body, { 
   behavior: myCustomBehavior
});
</script>

Preferred touch-action values per gesture

Gesture Event	Least restrictive touch-action value
hold	auto
tap	auto
doubletap	manipulation
drag, dragup, dragdown, dragend	pan-x
drag, dragleft, dragright, dragend	pan-y
swipeup, swipedown	pan-x
swipeleft, swiperight	pan-y
transform, transformstart, transformend	pan-x pan-y
rotate	pan-x pan-y
pinch, pinchin, pinchout	pan-x pan-y
touch	auto
release	auto