Touch Action
The Telerik and Kendo UI Touch Action Utilities are CSS utility classes that enable you to control the behavior of an element when a user interacts with it on a touchscreen device.
| Utility Class | CSS Property |
|---|---|
.k-touch-action-none | touch-action: none; |
.k-touch-action-auto | touch-action: auto; |
.k-touch-action-pan-x | touch-action: pan-x; |
.k-touch-action-pan-y | touch-action: pan-y; |
.k-touch-action-pan-left | touch-action: pan-left; |
.k-touch-action-pan-right | touch-action: pan-right; |
.k-touch-action-pan-up | touch-action: pan-up; |
.k-touch-action-pan-down | touch-action: pan-down; |
.k-touch-action-pinch-zoom | touch-action: pinch-zoom; |
.k-touch-action-manipulation | touch-action: manipulation; |
Horizontal
Use the k-touch-action-pan-x utility to enable horizontal scrolling on touch devices.
Use a touchscreen device to interact with the following demo.
Vertical
Use the k-touch-action-pan-y utility to enable vertical scrolling on touch devices.
Use a touchscreen device to interact with the following demo.
Automatic
Use the k-touch-action-auto utility to let the element determine the touch behavior.
Use a touchscreen device to interact with the following demo.
No Action
Use the k-touch-action-none utility to disable all touch actions on an element.
Use a touchscreen device to interact with the following demo.
