CSS touch-action Property
Last Updated :
30 Aug, 2022
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:
Supported Browsers:
- Google Chrome 36+
- Edge 12+
- Firefox 52+
- Opera 23+
- Safari 13+
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...