---
title: Touch Action
position: 8
seo_title: Telerik and Kendo UI Touch Action Utilities
seo_description: Use the Telerik and Kendo UI Touch Action utilities to control
  the user actions on touchscreen devices.
---
## 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.

<CSSRulesList data='{"id":"touch-action"}'></CSSRulesList>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/touch-action/horizontal","codePreviewSettings":{"filterSelector":".k-touch-action-pan-x","customHtml":"<div class=\"k-touch-action-pan-x k-w-screen\">\n  ...\n</div>"},"height":"200"}'></LiveDemo>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/touch-action/vertical","codePreviewSettings":{"filterSelector":".k-touch-action-pan-y","customHtml":"<div class=\"k-touch-action-pan-y k-w-screen\">\n  ...\n</div>"},"height":"200"}'></LiveDemo>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/touch-action/auto","codePreviewSettings":{"filterSelector":".k-touch-action-auto","customHtml":"<div class=\"k-touch-action-auto k-w-screen\">\n  ...\n</div>"},"height":"200"}'></LiveDemo>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/touch-action/none","codePreviewSettings":{"filterSelector":".k-touch-action-none","customHtml":"<div class=\"k-touch-action-none k-w-screen\">\n  ...\n</div>"},"height":"200"}'></LiveDemo>