CSS touch-action

1. touch-action 속성:  어떤 요소 내에서 브라우저가 처리할 터치 액션의 목록을 지정할 수 있다. 

2. touch-action의 값:

1) auto: 모든 터치 이벤트를 활성화

.promotion{
	touch-action: auto;
}

 

2) none: 모든 터치 이벤트를 비활성화

 

.promotion {
	touch-action: none;
}

 

3) pan-x, pan-y : 특정 객체를 터치한 후, 수직 혹은 수평 방향으로만 스크롤의 범위를 제한한다.

 

.promotion {
    touch-action: pan-x; /*한 손가락 수평(x축) 이동 제스처를 사용*/    
}
.promotion {
    touch-action: pan-y; /*한 손가락 수직(y축) 이동 제스처를 사용*/    
}

4) pan-x, pan-y : 여러 손가락을 통한 확대, 축소, 이동을 활성화

.promotion {
    touch-action: pinch-zoom; /*여러 손가락을 사용한 확대/ 축소만 허용*/    
}

5) pan-left, pan-right, pan-up, pan-down: 지정된 한쪽 방향으로만 스크롤을 시작할 수 있다. 해당 방향으로 스크롤 시작 후, 반대 방향으로 스크롤이 가능

 

.promotion1 {
    touch-action: pan-left; /*왼쪽 방향으로의 터치를 사용한 스크롤 허용*/    
}
.promotion2 {
    touch-action: pan-right; /*오른쪽 방향으로의 터치를 사용한 스크롤 허용*/     
}
.promotion3 {
    touch-action: pan-up; /*위쪽 방향으로의 터치를 사용한 스크롤 허용*/    
}
.promotion4 {
    touch-action: pan-down; /*아래쪽 방향으로의 터치를 사용한 스크롤 허용*/    
}

 

 

6) manipulation: 패닝 및 핀치 확대/ 축소 제스처를 활성화하지만 두 번 탭하여 확대/축소하는 것과 추가 비표준 제스처를 비활성화합니다. manipulation은 pan-x, pan-y, pinch-zoom의 3가지 속성을 합친 것과 같습니다.

.promotion{
	touch-action: manipulation;
}