touch-action CSS 속성을 사용하면 개발자가 사용자가 요소와 상호작용하는 방식을 제한할 수 있습니다. 이는 특히 필요하지 않을 때 이벤트가 전달되는 것을 방지하는 데 유용합니다.
버전 55 이전에는 Chrome에서 요소가 한 방향으로 스크롤되도록 제한하는 pan-x 및 pan-y를 지원했습니다.
아래 동영상에서는 터치 작업이 정의되지 않은 요소(왼쪽)와 pan-x 및 pan-y (중간 및 오른쪽)의 예를 보여줍니다.
가운데와 오른쪽 스크린캐스트의 CSS는 다음과 같습니다.
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
Chrome 55에서는 pan-left, pan-right, pan-up, pan-down가 추가되었습니다. 이러한 속성은 동작에 미묘하지만 중요한 차이가 있습니다.
이러한 속성은 사용자가 한 방향으로 동작을 시작해야 요소가 응답하도록 합니다. 이는 사용자가 화면 아래쪽으로 동작할 때만 응답하는 '당겨서 새로고침' 동작과 유사합니다.
다음 동영상에서는 동작이 각각 오른쪽에서 왼쪽으로, 아래에서 위로 시작되어야 하는 pan-right 및 pan-down를 보여줍니다.
동작이 시작되면 앞뒤로 화면 이동을 할 수 있습니다. 영향을 받는 것은 초기 방향뿐입니다.
동영상에서 이 동작을 보여줍니다. 하지만 샘플을 확인하여 직접 시도해 보는 것이 더 쉬울 수 있습니다.
이 데모의 CSS는 다음과 같습니다.
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
터치 액션 세계에서 마지막으로 발생하는 일은 pinch-zoom 속성입니다. 이 속성은 Chrome 55의 새로운 속성으로, 플래그 뒤에 있으며 모든 화면 이동 옵션(예: pan-x, pan-y, pan-left, pan-right, pan-down, pan-up)과 함께 사용할 수 있습니다.
웹사이트에서 손가락으로 누르면 일반적으로 페이지 콘텐츠가 확대됩니다.
touch-action를 정의하면 이 동작이 방지되지만 핀치 줌을 추가하면 이 동작이 다시 사용 설정됩니다.
이 동영상에서는 touch-action: pan-x와 touch-action: pan-x pinch-zoom의 차이를 보여줍니다.
이러한 모든 속성은 개발자가 pointer-events를 사용하여 구현해야 하는 일부 로직을 단순화해야 합니다.