개발자는 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를 사용하여 구현해야 하는 일부 로직을 단순화해야 합니다.