Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2: The following example demonstrates the touch-action: auto option.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 3: The following example demonstrates the touch-action: pan-x option.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 4: The following example demonstrates the touch-action: pan-y option.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 5: The following example demonstrates the touch-action: pan-right option.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :