{"id":280309,"date":"2019-01-02T08:18:55","date_gmt":"2019-01-02T15:18:55","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=280309"},"modified":"2019-01-02T08:18:55","modified_gmt":"2019-01-02T15:18:55","slug":"touch-action","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/touch-action\/","title":{"rendered":"touch-action"},"content":{"rendered":"<p>The <code>touch-action<\/code> property in CSS gives you control over the effect of touchscreen interactions with an element, similar to the more widely-used <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/pointer-events\/\">pointer-events<\/a><\/code> property used to control mouse interactions.<\/p>\n<pre rel=\"CSS\" class=\"language-css\"><code class=\"language-css\">#element {\r\n  touch-action: pan-right pinch-zoom;\r\n}<\/code><\/pre>\n<p>The <code>touch-action<\/code> property is useful primarily for interactive UI elements that need slightly different behavior depending on the type of device being used. When your users might expect an element to behave a particular way with a mouse, and slightly different behavior on a touch screen, <code>touch-action<\/code> will come in handy.<\/p>\n<p><!--more--><\/p>\n<p>The most obvious example of this is an interactive map element. If you&#8217;ve ever viewed a map not designed to work with touch devices, you&#8217;ve probably tried to pinch and zoom only to find the browser magnifying the element, but not actually zooming the actual map.<\/p>\n<p>By default, a browser will handle touch interactions automatically: Pinch to zoom, swipe to scroll, etc. Setting <code>touch-action<\/code> to <code>none<\/code> will disable all browser handling of these events, leaving them up to you to implement (via JavaScript). If you only want to take over one interaction, tell the browser to handle the rest. For example, if you wrote some JavaScript that only handles zooming, you can tell the browser to handle everything else with this property: <code>touch-action: pan-x pan-y;<\/code>.<\/p>\n<p data-height=\"622\" style=\"height: 622px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"PXbPXL\" data-default-tab=\"result\" data-user=\"css-tricks\" data-pen-title=\"examples of touch-action\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/team\/css-tricks\/pen\/PXbPXL\/\" rel=\"noopener\">examples of touch-action<\/a> by CSS-Tricks (<a href=\"https:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Syntax<\/h3>\n<pre rel=\"CSS\"><code class=\"language-css\">touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation<\/code><\/pre>\n<h3>Values<\/h3>\n<p>The <code>touch-action<\/code> property accepts the following values:<\/p>\n<ul>\n<li><code>auto<\/code>: Allows the browser to handle all pan and zoom interactions.<\/li>\n<li><code>none<\/code>: Disables browsers from handling all pan and zoom interactions. This opens up the ability to custom define those interactions in JavaScript.<\/li>\n<li><code>pan-x<\/code>: Enables horizontal panning with a single finger interaction. It is shorthand for the <code>pan-left<\/code> and <code>pan-right<\/code> values, but can be used in combination with  <code>pan-y<\/code>, <code>pan-up<\/code>, <code>pan-down<\/code> and <code>pinch-zoom<\/code>.<\/li>\n<li><code>pan-y<\/code> Enables vertical panning with a single finger interaction. It is shorthand for the <code>pan-up<\/code> and <code>pan-down<\/code> values, but can be used in combination with  <code>pan-x<\/code>, <code>pan-left<\/code>, <code>pan-right<\/code> and <code>pinch-zoom<\/code>.<\/li>\n<li><code>manipulation<\/code>: Enables pinch and zoom interactions, but disables others you might find on some devices, like double-tap to zoom. It is shorthand for the combination of <code>pan-x pan-y pinch-zoom<\/code>.<\/li>\n<li><code>pan-left<\/code> (Experimental): Enables a single finger interaction when a user&#8217;s finger moves to the right, which pans toward the left.<\/li>\n<li><code>pan-right<\/code> (Experimental): Enables a single finger interaction when a user&#8217;s finger moves to the left, which pans toward the right.<\/li>\n<li><code>pan-down<\/code> (Experimental): Enables a single finger interaction when a user&#8217;s finger moves up, which pans downward.<\/li>\n<li><code>pan-up<\/code> (Experimental): Enables a single finger interaction when a user&#8217;s finger moves down, which pans upward.<\/li>\n<li><code>pinch-zoom<\/code>: Enables multi-finger interactions and can be combined with any other <code>pan-<\/code> value.<\/li>\n<\/ul>\n<h3>Related<\/h3>\n<ul>\n<li><a href=\"\/almanac\/properties\/p\/pointer-events\/\"><code>pointer-events<\/code><\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-touch-action\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">36<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">52<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">10*<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"n nope\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">13.0-13.1<\/span><\/td><\/tr><\/table><\/div><\/div>\n<p>Safari is the glaring omission to touch-action support. iOs Safari has limited support, only for the <code>auto<\/code> and <code>manipulation<\/code> values.<\/p>\n<h3>Additional Information<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/pointerevents\/#the-touch-action-css-property\" rel=\"noopener\">Pointer Events Level 2 Specification<\/a> &#8211; The spec is currently in Candidate Recommendation but is intended to move to Proposed Recommendation early 2019, as of this writing. The intent is that the document will become an official W3C Recommendation.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/touch-action\" rel=\"noopener\">MDN Documentation<\/a><\/li>\n<li><a href=\"https:\/\/googlechrome.github.io\/samples\/touch-action\/\" rel=\"noopener\">Touch-action pinch-zoom CSS property Sample<\/a> &#8211; Google Chrome&#8217;s demo of its implementation.<\/li>\n<li><a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=133112\" rel=\"noopener\">WebKit Bugzilla Ticket #133112<\/a> &#8211; Open ticket to propose Safari support. Add your vote to bump it up.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The touch-action property in CSS gives you control over the effect of touchscreen interactions with an element, similar to the more widely-used pointer-events property used to control mouse interactions. #element { touch-action: pan-right pinch-zoom; } The touch-action property is useful primarily for interactive UI elements that need slightly different behavior depending on the type of [&hellip;]<\/p>\n","protected":false},"author":223334,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1253,886,1088,1553],"acf":[],"jetpack-related-posts":[{"id":18170,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/pointer-events\/","url_meta":{"origin":280309,"position":0},"title":"pointer-events","date":"June 20, 2013","format":false,"excerpt":"The pointer-events property allows for control over how HTML elements respond to mouse\/touch events \u2013 including CSS hover\/active states, click\/tap events in Javascript, and whether or not the cursor is visible. .avoid-clicks { pointer-events: none; } While the pointer-events property takes eleven possible values, all but three of them are\u2026","rel":"","context":"In \"pointer-events\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14043,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/cursor\/","url_meta":{"origin":280309,"position":1},"title":"cursor","date":"September 5, 2011","format":false,"excerpt":"The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it's only relevant in browsers\/operating systems in which there is a mouse and cursor. They are used essentially for UX to convey the\u2026","rel":"","context":"In \"cursor\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21524,"url":"https:\/\/css-tricks.com\/snippets\/css\/momentum-scrolling-on-ios-overflow-elements\/","url_meta":{"origin":280309,"position":2},"title":"Momentum Scrolling on iOS Overflow Elements","date":"May 4, 2013","format":false,"excerpt":"Web pages on iOS by default have a \"momentum\" style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the\u2026","rel":"","context":"With 105 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":283666,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overscroll-behavior\/","url_meta":{"origin":280309,"position":3},"title":"overscroll-behavior","date":"September 14, 2021","format":false,"excerpt":"The overscroll-behavior CSS property controls whether an element will use \u201cscroll chaining\u201d or not. You have likely experienced this behavior before and perhaps took it for granted that scrolling works like this on the web! If you are inside of an element that has its own scrolling (say it\u2019s vertical)\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/overflow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":9847,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/calculate-distance-between-mouse-and-element\/","url_meta":{"origin":280309,"position":4},"title":"Calculate Distance Between Mouse and Element","date":"June 19, 2011","format":false,"excerpt":"(function() { var mX, mY, distance, $distance = $('#distance span'), $element = $('#element'); function calculateDistance(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()\/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()\/2)), 2))); } $(document).mousemove(function(e) { mX = e.pageX; mY = e.pageY; distance = calculateDistance($element, mX, mY); $distance.text(distance); }); })(); This code will calculate the\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14069,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin\/","url_meta":{"origin":280309,"position":5},"title":"margin","date":"September 5, 2011","format":false,"excerpt":"The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders. Margins are set using lengths, percentages, or the keyword auto and can have negative values. Here's an example: .box { margin: 0 3em 0 3em; } margin is a\u2026","rel":"","context":"With 15 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/280309"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223334"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=280309"}],"version-history":[{"count":15,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/280309\/revisions"}],"predecessor-version":[{"id":280452,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/280309\/revisions\/280452"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=280309"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=280309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}