A propriedade CSS touch-action permite que um desenvolvedor restrinja a forma como um usuário
pode interagir com um elemento. Isso é muito útil para evitar o envio de eventos
quando não são necessários.
Antes da versão 55, o Chrome oferecia suporte a pan-x e pan-y, que restringem a rolagem
em uma direção.
O vídeo abaixo mostra um exemplo de elemento sem uma ação de toque definida (à esquerda), assim como pan-x e pan-y (meio e direita).
O CSS para os screencasts do meio e da direita é:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
No Chrome 55, foram adicionados pan-left, pan-right, pan-up e pan-down. Essas
propriedades têm uma diferença sutil, mas importante, no comportamento.
Essas propriedades forçam o usuário a iniciar gestos em uma direção antes que o elemento responda. Isso é semelhante ao gesto "puxar para atualizar", que só responde quando o usuário gesticular para baixo na tela.
O vídeo a seguir demonstra o pan-right e o pan-down, que
exigem gestos para começar da direita para a esquerda e de baixo para cima, respectivamente.
Depois que o gesto for iniciado, você pode mover para frente e para trás. Somente a direção inicial é afetada.
Embora o vídeo demonstre esse comportamento, pode ser mais fácil fazer um teste por conta própria consulte a amostra.
O CSS para esta demonstração é:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
A última coisa que acontece no mundo da ação de toque é a
propriedade pinch-zoom. Essa é uma nova propriedade no Chrome 55, atrás de uma flag,
que pode ser usada com qualquer uma das opções de movimentação
(ou seja, pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Se você fizer gesto de pinça em um site, ele geralmente aumentará o conteúdo da página.
Definir um touch-action evita esse comportamento, mas o zoom por gesto de pinça
reativa esse comportamento.
Este vídeo mostra a diferença entre touch-action: pan-x e
touch-action: pan-x pinch-zoom.
Todas essas propriedades precisam simplificar parte da lógica que precisaria
ser implementada pelos desenvolvedores usando pointer-events.