https://developers.google.com/web/fundamentals/design-and-ux/input/touch/
CSS 속성 touch-action을 사용하여 요소의 기본 터치 동작을 제어할 수 있습니다.
이 예시에서는 사용자 터치 시에 브라우저가 아무것도 수행하지 못하도록 touch-action: none을 사용합니다.
이렇게 하면 모든 터치 이벤트를 가로챌 수 있습니다.
/* Pass all touches to javascript
*/
touch-action: none;
touch-action: none은 모든 기본 브라우저 동작을 차단하므로 다소 위험한 옵션입니다. 상당수 경우 아래 옵션 중 하나가 더 나은 해결책입니다. touch-action을 사용하면 브라우저에 의해 구현된 동작을 비활성화할 수 있습니다. 예를 들어, IE10 이상에서는 동작 확대/축소를 위해 두 번 탭을 지원합니다. manipulation의 touch-action을 설정하여 기본 두 번 탭 동작을 차단할 수 있으며, 여러분이 두 번 탭 동작을 직접 구현할 수 있습니다.
다음은 흔히 사용되는 touch-action 값의 목록입니다.
터치 동작 매개변수
touch-action: none
터치 상호작용이 브라우저에 의해 처리되지 않습니다.
touch-action: pinch-zoom
`touch-action: none`과 같은 모든 브라우저 상호작용을 비활성화합니다. `pinch-zoom`은 여전히 브라우저에 의해 처리됩니다.
touch-action: pan-y pinch-zoom
세로 스크롤이나 핀치 줌을 비활성화하지 않고도 가로 스크롤을 자바스크립트에서 처리합니다(예: 이미지 캐러셀).
touch-action: manipulation
두 번 탭 동작을 비활성화합니다. 이 경우 브라우저에 의한 클릭 지연이 방지됩니다. 스크롤과 핀치 줌을 브라우저에게 맡깁니다.