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+
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
30 Aug, 2022
Like Article
Save Article