CSS touch-action Property

20 Dec, 2020
The touch-action CSS property is used to change the view of the selected element with respect to the change in touch by the user, For example, zooming the image, scrolling the image, etc. It is the action made by the touchscreen user on a particular region selected on the screen.
Note: Panning is nothing but scrolling with one-finger on a touch-enabled.
Syntax:
touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] ||
 [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation
Property value:
none: This stops supporting all the activities like gestures and panning in the browser.
auto: This supports all the activities like gestures and panning in the browser.
pan-x | pan-y: pan-x supports horizontal panning interaction similarly pan-y supports vertical panning.
pan-left | pan-right | pan-up | pan-down: As the names describe they support left, right, up, down direction of panning activities.
pinch-zoom: This is used to make two-finger zoom-in and zoom-out interactions with the screen.
manipulation: It is the combination of pan-x pan-y pinch-zoom interactions.
Example 1: The following example demonstrates the touch-action: none option.
HTML
<!DOCTYPE html><html>  <style type="text/css">    body {        display: flex;        flex-wrap: wrap;    }      .image {        margin: 1rem;        width: 300px;        height: 300px;        overflow: scroll;        position: relative;        margin-bottom: 15px;    }      .image img {        width: 1200px;        height: 1200px;    }      .touch-type {        position: absolute;        width: 100%;        text-align: center;        font-weight: bold;        top: 130px;        font-size: 24px;    }      .touch-none {        touch-action: none;      }</style>  <body>    <div class="image touch-none">        <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png">        <p class="touch-type">            touch-action:none; -This             means we can't perform all             paaning and zooming actions        </p>    </div></body>  </html>
Output:
Example 2: The following example demonstrates the touch-action: auto option.
HTML
<!DOCTYPE html><html>  <style type="text/css">    body {        display: flex;        flex-wrap: wrap;    }      .image {        margin: 1rem;        width: 300px;        height: 300px;        overflow: scroll;        position: relative;        margin-bottom: 15px;    }      .image img {        width: 1200px;        height: 1200px;    }      .touch-type {        position: absolute;        width: 100%;        text-align: center;        font-weight: bold;        top: 130px;        font-size: 24px;    }      .touch-auto {        touch-action: auto;    }</style>  <body>    <div class="image touch-auto">        <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png">          <p class="touch-type">            touch-action:auto - This means             you can pan anywhere on screen        </p>    </div></body>  </html>
Output:
Example 3: The following example demonstrates the touch-action: pan-x option.
HTML
<!DOCTYPE html><html>  <style type="text/css">    body {        display: flex;        flex-wrap: wrap;    }      .image {        margin: 1rem;        width: 300px;        height: 300px;        overflow: scroll;        position: relative;        margin-bottom: 15px;    }      .image img {        width: 1200px;        height: 1200px;    }      .touch-type {        position: absolute;        width: 100%;        text-align: center;        font-weight: bold;        top: 130px;        font-size: 24px;    }      .touch-pan-x {        touch-action: pan-x;    }</style>  <body>    <div class="image touch-pan-x">        <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png">        <p class="touch-type">            touch-action: pan-x;-This             means you can only scroll            /pan in x-direction        </p>    </div></body>  </html>
Output:
Example 4: The following example demonstrates the touch-action: pan-y option.
HTML
<!DOCTYPE html><html>  <style type="text/css">    body {        display: flex;        flex-wrap: wrap;    }      .map {        margin: 1rem;        width: 300px;        height: 300px;        overflow: scroll;        position: relative;        margin-bottom: 15px;    }      .image img {        width: 1200px;        height: 1200px;    }      .touch-type {        position: absolute;        width: 100%;        text-align: center;        font-weight: bold;        top: 130px;        font-size: 24px;    }      .touch-pan-y {        touch-action: pan-y;    }</style>  <body>    <div class="image touch-pan-y">          <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png">        <p class="touch-type">            touch-action: pan-y;-This             means you can only scroll            /pan in y-direction        </p>    </div></body>  </html>
Output:
Example 5: The following example demonstrates the touch-action: pan-right option.
HTML
<!DOCTYPE html><html>  <style type="text/css">    body {        display: flex;        flex-wrap: wrap;    }      .image {        margin: 1rem;        width: 300px;        height: 300px;        overflow: scroll;        position: relative;        margin-bottom: 15px;    }      .image img {        width: 1200px;        height: 1200px;    }      .touch-type {        position: absolute;        width: 100%;        text-align: center;        font-weight: bold;        top: 130px;        font-size: 24px;    }      .touch-pan-right {        touch-action: pan-right;    }</style>  <body>    <div class="image touch-pan-right">          <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png">          <p class="touch-type">            touch-action:pan-right;-This             means you can only scroll/pan             in right direction        </p>    </div></body>  </html>
Output:
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array