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 |
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 |
|---|---|---|
| 캔버스 / 드로잉 | tan | 모든 터치를 JS로 직접 처리 |
| 지도 / 인터랙티브 뷰어 | tan | 핀치 줌, 드래그를 커스텀 처리 |
| 가로 캐러셀 | tapx | 가로 스와이프 허용, 세로 스크롤 차단 |
| 세로 리스트 + 스와이프 삭제 | tapy | 세로 스크롤 허용, 가로 스와이프를 JS로 처리 |
| 드래그 앤 드롭 | tan | 드래그 중 스크롤 방지 |
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.