AAtomic CSS

touch-action

터치 제스처의 브라우저 기본 동작을 제어합니다. tan으로 모든 터치 동작을 비활성화하거나, tapx/tapy로 특정 방향의 스크롤만 허용할 수 있습니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
taatouch-action: auto기본값. 모든 터치 제스처 허용
tantouch-action: none모든 터치 제스처 비활성화
tapxtouch-action: pan-x수평 스크롤만 허용
tapytouch-action: pan-y수직 스크롤만 허용

클래스별 상세

taatouch-action: auto

브라우저 기본값입니다. 모든 터치 제스처(스크롤, 줌, 패닝 등)가 정상적으로 동작합니다.

<!-- Default touch behavior -->
<div class="taa">
  All touch gestures work normally.
</div>

tantouch-action: none

모든 터치 제스처의 브라우저 기본 동작을 비활성화합니다. 커스텀 제스처 핸들링(드래그, 스와이프, 핀치 줌 등)을 직접 구현할 때 사용합니다. 캔버스, 지도, 드래그 앤 드롭 영역 등에 적합합니다.

<!-- 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>

접근성 주의

tan은 모든 터치 동작을 차단합니다. 필요한 영역에만 최소한으로 적용하고, 반드시 JavaScript로 대체 인터랙션을 제공하세요.

tapxtouch-action: pan-x

수평(좌우) 스크롤만 허용합니다. 수직 스크롤과 핀치 줌은 차단됩니다. 가로 스와이프 캐러셀이나 슬라이더에서 세로 스크롤 간섭을 방지할 때 유용합니다.

<!-- 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

수직(상하) 스크롤만 허용합니다. 수평 스크롤과 핀치 줌은 차단됩니다. 세로로만 스크롤해야 하는 영역에서 좌우 스와이프 제스처를 직접 처리할 때 사용합니다.

<!-- 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>

자주 쓰는 패턴

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">상황추천이유
캔버스 / 드로잉tan모든 터치를 JS로 직접 처리
지도 / 인터랙티브 뷰어tan핀치 줌, 드래그를 커스텀 처리
가로 캐러셀tapx가로 스와이프 허용, 세로 스크롤 차단
세로 리스트 + 스와이프 삭제tapy세로 스크롤 허용, 가로 스와이프를 JS로 처리
드래그 앤 드롭tan드래그 중 스크롤 방지

팁 & 주의사항

300ms 딜레이 제거

tan을 적용하면 브라우저의 더블탭 줌 감지를 위한 300ms 터치 딜레이가 제거됩니다. 빠른 터치 반응이 필요한 UI에 유용합니다.

데스크탑에서는 무시됨

touch-action은 터치 디바이스에서만 동작합니다. 마우스 이벤트에는 영향을 주지 않으므로, 데스크탑에서 별도의 처리가 필요하지 않습니다.

최소 범위 적용

tan은 강력하지만, 페이지 전체에 적용하면 스크롤이 불가능해집니다. 반드시 필요한 요소에만 적용하세요.

pointer-eventsuser-selectoverscroll-behavior