CSS ?touch-action 속성: 특정 영역에서 사용자 작업을 허용하는지 여부와 사용자 작업(예: 브라우저 자체 스와이프, 확대/축소 등)에 응답하는 방법을 지정합니다.
터치 동작 속성은 다음과 같이 지정할 수 있습니다:
1. 키워드 ?auto, none, 조작 또는
2. 키워드 수 ?pan-x, pan-left, pan-right, 0개 또는 임의의 키워드 ?pan-y, pan-up, pan-down 및 선택적 키워드 ?pinch-zoom.
1. 자동
요소에서 터치 이벤트가 발생하면 브라우저는 뷰포트를 매끄럽게 하고 크기를 조정하는 등 수행할 작업을 결정합니다.
2. 없음
요소에 터치 이벤트가 발생하면 아무 작업도 수행되지 않습니다.
3. pan-x
한 손가락 수평 이동 동작을 활성화합니다. 팬-이(pan-y), 팬업(pan-up), 팬다운(pan-down) 및/또는 핀치줌(pinch-zoom)과 함께 사용할 수 있습니다.
4. 팬-Y
한 손가락 수직 팬 동작을 활성화합니다. pan-x , pan-left , pan-right 및/또는 핀치 줌과 결합할 수 있습니다.
5. 조작
브라우저는 스크롤 및 연속 확대/축소 작업만 허용합니다. auto 값이 지원하는 다른 동작은 지원되지 않습니다. 팬 및 확대/축소 제스처를 활성화하지만 확대/축소를 위한 두 번 탭과 같은 기타 비표준 제스처는 비활성화합니다. 두 번 클릭 확대/축소를 비활성화하면 사용자가 화면을 탭할 때 브라우저가 클릭 이벤트 생성을 지연할 필요성이 줄어듭니다. 이것은 "pan-x pan-y pinch-zoom"(그 자체로는 여전히 호환성을 위해 작동함)의 별칭입니다.
6. pan-left,?pan-right,pan-up,pan-down?
지정된 방향으로 스크롤을 시작하는 한 손가락 동작을 활성화합니다. 스크롤이 시작되면 방향은 여전히 반대일 수 있습니다. "팬업" 스크롤은 사용자가 손가락을 화면 표면 아래로 드래그하는 것을 의미하고, 마찬가지로 팬-왼쪽은 사용자가 손가락을 오른쪽으로 드래그하는 것을 의미합니다. 더 간단한 표현이 없으면 여러 방향을 결합할 수 있습니다(예: "pan-x"가 더 간단하기 때문에 "pan-left pan-right"는 유효하지 않지만 "pan-left pan-down"은 유효합니다).
7. 핀치 줌
여러 손가락으로 페이지 이동 및 확대/축소를 활성화합니다. 이는 모든 번역 값과 결합될 수 있습니다.
기본적으로 팬(스크롤) 및 확대/축소 동작은 브라우저에서만 처리됩니다. Pointer_events를 사용하는 애플리케이션은 브라우저가 터치 동작 처리를 시작할 때 포인터 취소 이벤트를 수신합니다. 브라우저가 처리해야 하는 제스처를 명시적으로 지정함으로써 애플리케이션은 포인터 이동 및 포인터 업 리스너의 나머지 제스처에 대해 자체 동작을 제공할 수 있습니다. Touch_events를 사용하는 애플리케이션은 PreventDefault()를 호출하여 브라우저의 제스처 처리를 비활성화하지만 이벤트 리스너를 호출하기 전에 브라우저가 애플리케이션의 의도를 이해할 수 있도록 터치 동작도 사용해야 합니다.
제스처가 시작되면 브라우저는 제스처를 구현하는 요소(즉, 스크롤을 포함하는 첫 번째 요소)까지 터치된 요소와 모든 상위 요소의 터치 동작 값을 교차합니다. 즉, 실제로 터치 동작은 일반적으로 해당 요소의 하위 항목에 대한 터치 동작을 명시적으로 지정하지 않고 일부 맞춤 동작이 있는 단일 요소에만 적용됩니다. 동작이 시작된 후 터치 동작 값의 변경은 현재 동작의 동작에 영향을 주지 않습니다.