touch-action

touch-action: 브라우저에게 맡길 터치 액션 지정

 

기본적으로 터치 이벤트의 처리는 브라우저가 담당하는 영역이지만 touch-action 속성을 통해 어떤 요소 내 브라우저가 처리할 터치 액션 목록을 지정할 수 있다.

표준 터치 제스처로는 터치를 사용한 스크롤(paging)과 확대/축소(pinch zoom)이 있으며, 브라우저에 따라 더블 탭으로 확대 등 표준이 아닌 제스처를 지원하는 경우도 있다.

 

touch-action: auto를 사용할 경우를 제외하고, 명시해준 속성의 터치 액션만이 브라우저에 의해 처리된다.

예를 들어, touch-action: pinch-zoom 속성을 갖는 엘리먼트에서는 터치를 사용한 스크롤이 (자바스크립트로 별도 처리해주지 않는 이상) 무시된다.

 

touch-action: auto; // 기본값
touch-action: none; // 브라우저의 모든 터치 이벤트를 무시하도록 설정

touch-action: pan-x; // 특정 축으로의 터치를 사용한 스크롤 허용
touch-action: pan-y;

touch-action: pan-left; // 특정 방향으로의 터치를 사용한 스크롤 허용
touch-action: pan-right;
touch-action: pan-right;
touch-action: pan-down;

touch-action: pinch-zoom;// 핀치 줌(확대/축소)를 허용

touch-action: manipulation; // 터치를 이용한 스크롤, 핀치 줌만 허용하고 그 외 비표준 동작(더블 탭으로 확대 등) 비허용

touch-action: pan-y pinch-zoom; // 동시에 여러값 지정