touch-action
Controls browser default touch gesture behavior. Use tan to disable all touch actions, or tapx/tapy for specific direction scrolling.
Class List
| Class | CSS | Description |
|---|---|---|
taa | touch-action: auto | Default. All touch gestures allowed |
tan | touch-action: none | Disable all touch gestures |
tapx | touch-action: pan-x | Allow horizontal scroll only |
tapy | touch-action: pan-y | Allow vertical scroll only |
tam | touch-action: manipulation | Only basic gestures (removes tap delay) |
tapz | touch-action: pinch-zoom | Allow pinch-zoom only |
Class Details
taatouch-action: auto
Browser default. All touch gestures (scroll, zoom, panning) work normally.
<!-- Default touch behavior -->
<div class="taa">
All touch gestures work normally.
</div>tantouch-action: none
Disables all browser default touch gestures. For custom gesture handling (drag, swipe, pinch zoom). Suitable for canvas, maps, drag-and-drop.
<!-- Canvas: custom gesture handling -->
<canvas class="tan w100p h40rem bg18181B br8px">
<!-- Handle touch events directly with JS -->
</canvas>
<!-- Drag and drop area -->
<div class="tan p2rem bg0F0F17 br8px cp">
<p>This area works with drag</p>
</div>
<!-- Map container -->
<div class="tan w100p h30rem br8px oh">
<div class="map-container">Custom map interaction</div>
</div>Accessibility Note
tan blocks all touch actions. Apply minimally and provide alternative interactions via JavaScript.
tapxtouch-action: pan-x
Allows horizontal scrolling only. Vertical scroll and pinch zoom blocked. Useful for horizontal swipe carousels.
<!-- Horizontal swipe carousel -->
<div class="tapx oxa df gap16px p16px">
<div class="fs0 w28rem h20rem bg6366F1 br8px df jcc aic cFFFFFF">Slide 1</div>
<div class="fs0 w28rem h20rem bg6366F1 br8px df jcc aic cFFFFFF">Slide 2</div>
<div class="fs0 w28rem h20rem bg6366F1 br8px df jcc aic cFFFFFF">Slide 3</div>
</div>tapytouch-action: pan-y
Allows vertical scrolling only. Horizontal scroll and pinch zoom blocked. For handling left/right swipe gestures in vertical areas.
<!-- Allow vertical scroll only (horizontal swipe handled by JS) -->
<div class="tapy oya h40rem p2rem bg0F0F17 br8px">
<p>Only vertical scrolling is allowed.</p>
<p>Horizontal swipe is handled by JS for page transitions, etc.</p>
</div>Common Patterns
| Situation | Recommended | Reason |
|---|---|---|
| Canvas / Drawing | tan | Handle all touches directly with JS |
| Map / Interactive viewer | tan | Custom-handle pinch zoom and drag |
| Horizontal carousel | tapx | Allow horizontal swipe, block vertical scroll |
| Vertical list + swipe to delete | tapy | Allow vertical scroll, handle horizontal swipe with JS |
| Drag and drop | tan | Prevent scrolling while dragging |
Tips & Notes
Removes 300ms delay
Applying tan removes the browser's 300ms touch delay for double-tap zoom. Useful for fast touch response UIs.
Ignored on desktop
touch-action only works on touch devices. No effect on mouse events, no separate desktop handling needed.
Apply to minimal scope
tan is powerful, but page-wide application makes scrolling impossible. Apply only where needed.