Skip to content
Related Articles
Open in App
Not now

Related Articles

CSS touch-action Property

Improve Article
Save Article
  • Last Updated : 30 Aug, 2022
Improve Article
Save Article

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:
Supported Browsers:
  • Google Chrome 36+
  • Edge 12+
  • Firefox 52+
  • Opera 23+
  • Safari 13+

My Personal Notes
arrow_drop_up
Related Articles
1.
CSS | transition-property Property
2.
How to override the CSS properties of a class using another CSS class ?
3.
Difference between CSS Grid and CSS Flexbox
4.
Which CSS framework is better Tailwind CSS or Bootstrap ?
5.
How to use CSS in different dimension (CSS-in-JS) ?
6.
CSS Cheat Sheet - A Basic Guide to CSS
7.
How to identify unused CSS definitions from multiple CSS files in a project ?
8.
How to Play and Pause CSS Animations using CSS Custom Properties ?
9.
Create a CSS Fireflies background using HTML/CSS
10.
CSS pseudo elements every CSS developer should know
Previous
Node.js http.IncomingMessage.method Method
Next

script.aculo.us Sliders setEnabled option
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
saideepesh000
@saideepesh000
Vote for difficulty





Improved By :
Article Tags :
Report Issue
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!