touch-action css 속성

🔥 문제 상황

스와이프 동작을 통해 snackbar를 없애는 Pointer 이벤트 로직을 구현했다. 데스크탑에서는 정상적으로 스와이프가 되었지만, 모바일에서는 snackbar가 화면 밖으로 이동하지 못하는 현상이 있었다.

데스크탑

모바일

 

✅ 문제 해결

모바일 브라우저는 터치 이벤트를 감지하면 스크롤 동작, 줌 등 기본 동작을 우선 처리하려고 해서 직접 구현한 스와이프 터치 반응이 제한될 수 있다고 한다.

 

touch-action: none 속성을 추가하여 브라우저의 기본 터치 동작을 차단하고 직접 구현한 터치 동작을 우선적으로 처리하도록 변경했다.

 

 

touch-action: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

 

auto: 브라우저가 터치 동작을 자동으로 처리합니다.

none: 모든 터치 동작을 비활성화합니다.

pan-x: 수평 방향의 스크롤만 허용합니다.

pan-y: 수직 방향의 스크롤만 허용합니다.

pinch-zoom: 확대/축소 제스처를 허용합니다.

manipulation: 스크롤과 확대/축소만 허용하고 다른 제스처(더블 탭) 등은 차단합니다.