Skip to content
Related Articles

Related Articles

Improve Article

CSS touch-action Property

  • Last Updated : 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="
        <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=
  
        <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=
        <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=
        <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=
  
        <p class="touch-type">
            touch-action:pan-right;-This 
            means you can only scroll/pan 
            in right direction
        </p>
    </div>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :