Luego de tanto trabajar hemos dado con el arreglo de este atasco que algunos de nuestros lectores de nuestro sitio han presentado. Si deseas compartir algo más puedes compartir tu conocimiento.
los touch-action La propiedad CSS establece cómo un usuario de pantalla táctil puede manipular la región de un elemento (por ejemplo, haciendo zoom en las funciones integradas en el navegador).
/* Keyword values */touch-action: auto;touch-action: none;touch-action: pan-x;touch-action: pan-left;touch-action: pan-right;touch-action: pan-y;touch-action: pan-up;touch-action: pan-down;touch-action: pinch-zoom;touch-action: manipulation;/* Global values */touch-action: inherit;touch-action: initial;touch-action: unset;
De forma predeterminada, los gestos de paneo (desplazamiento) y pellizco son manejados exclusivamente por el navegador. Una aplicación que usa Eventos de puntero recibirá un pointercancel evento cuando el navegador comienza a manejar un gesto táctil. Al especificar explícitamente qué gestos debe manejar el navegador, una aplicación puede proporcionar su propio comportamiento en pointermove y pointerup oyentes para los gestos restantes. Aplicaciones que utilizan Toque eventos deshabilite el manejo de gestos del navegador llamando preventDefault(), pero también debería usar touch-action para asegurarse de que el navegador conozca la intención de la aplicación antes de que se haya invocado cualquier detector de eventos.
Cuando se inicia un gesto, el navegador se cruza con el touch-action valores del elemento tocado y sus antepasados, hasta el que implementa el gesto (es decir, el primero que contiene el elemento de desplazamiento). Esto significa que en la práctica, touch-action generalmente se aplica solo a elementos de nivel superior que tienen algún comportamiento personalizado, sin necesidad de especificar touch-action explícitamente en cualquiera de los descendientes de ese elemento.
Una vez que comienza un gesto, cambia a touch-action no tendrá ningún impacto en el comportamiento del gesto actual.
Sintaxis
los touch-action La propiedad se puede especificar como:
- Una de las palabras clave
auto,none,manipulation, o - Una de las palabras clave
pan-x,pan-left,pan-right, y / o una de las palabras clavepan-y,pan-up,pan-down, más opcionalmente la palabra clavepinch-zoom.
Valores
auto- Habilite el manejo del navegador de todos los gestos de paneo y zoom.
none- Desactive la gestión del navegador de todos los gestos de panorámica y zoom.
pan-x- Habilite los gestos de panorámica horizontal con un solo dedo. Puede combinarse con pan-y, pan-up, pan-down y / o pellizcar-zoom.
pan-y- Habilite los gestos de panorámica vertical con un solo dedo. Puede combinarse con pan-x, pan-izquierda, panderecha y / o pellizcar-zoom.
manipulation- Habilite los gestos de paneo y zoom de pellizco, pero deshabilite los gestos no estándar adicionales, como tocar dos veces para hacer zoom. La desactivación del doble toque para hacer zoom elimina la necesidad de que los navegadores retrasen la generación de hacer clic eventos cuando el usuario toca la pantalla. Este es un alias para “pan-x pan-y pellizcar-zoom“(que, por compatibilidad, sigue siendo válido).
pan-left,pan-right,pan-up,pan-downEsta es una API experimental que no debe usarse en código de producción.- Habilite los gestos con un solo dedo que comienzan desplazándose en las direcciones indicadas. Una vez que ha comenzado el desplazamiento, la dirección aún puede invertirse. Tenga en cuenta que desplazarse “hacia arriba” (pan-up) significa que el usuario está arrastrando el dedo hacia abajo sobre la superficie de la pantalla y, de la misma forma, pan-izquierda significa que el usuario está arrastrando el dedo hacia la derecha. Se pueden combinar varias direcciones, excepto cuando hay una representación más simple (por ejemplo, “pan-left pan-right“no es válido desde”pan-x“es más simple, pero”pan-left pan-down” es válida).
pinch-zoom- Habilite la panorámica y el zoom de la página con varios dedos. Esto puede combinarse con cualquiera de los sartén- valores.
Preocupaciones de accesibilidad
Una declaración de touch-action: none; puede inhibir el funcionamiento de las capacidades de zoom de un navegador. Esto evitará que las personas con problemas de visión puedan leer y comprender el contenido de la página.
- MDN Entendiendo WCAG, explicaciones de la Pauta 1.4
- Comprender el criterio de cumplimiento 1.4.4 | Entendiendo WCAG 2.0
Definicion formal
| Valor inicial | auto |
|---|---|
| Se aplica a | todos los elementos excepto: elementos en línea no reemplazados, filas de tablas, grupos de filas, columnas de tablas y grupos de columnas |
| Heredado | no |
| Valor calculado | Como se especificó |
| Tipo de animación | discreto |
Sintaxis formal
auto | none |[[ pan-x | pan-left | pan-right ]||[ pan-y | pan-up | pan-down ]|| pinch-zoom ]| manipulation
Ejemplos de
Deshabilitar todos los gestos
El uso más común es deshabilitar todos los gestos en un elemento (y sus descendientes no desplazables) que proporciona su propio comportamiento de arrastre y zoom, como un mapa o una superficie de juego.
HTML
<divid="map">div>
CSS
#mapheight: 150vh;width: 70vw;background:linear-gradient(blue, green);touch-action: none;
Resultado
Especificaciones
| Especificación | Estado | Comentario |
|---|---|---|
| Estándar de compatibilidad La definición de ‘acción táctil’ en esa especificación. |
Estándar de vida | Adicional pinch-zoom El valor de la propiedad. |
| Eventos de puntero – Nivel 3 La definición de ‘acción táctil’ en esa especificación. |
Borrador del editor | Adicional pan-left, pan-right, pan-up, pan-down valores de propiedad. |
| Eventos de puntero – Nivel 2 La definición de ‘acción táctil’ en esa especificación. |
Recomendación | Última recomendación. |
| Eventos de puntero La definición de ‘acción táctil’ en esa especificación. |
Obsoleto | Definición inicial. |
Compatibilidad del navegador
| Escritorio | Móvil | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Cromo | Borde | Firefox | explorador de Internet | Ópera | Safari | WebView Android | Chrome Android | Firefox para Android | Opera Android | Safari en IOS | Internet de Samsung | |
touch-action |
36 | 12 | 52 No se aplica a las plataformas de Firefox que no admiten eventos de puntero ni de toque. 29 No se aplica a las plataformas de Firefox que no admiten eventos de puntero ni de tacto. | 1110 | 23 | 13 | 37 | 36 | 5229 | 24 | 9.3 | 3,0 |
axis-pan |
36 | 12 | 52 No se aplica a las plataformas de Firefox que no admiten eventos de puntero ni de toque. 29 No se aplica a las plataformas de Firefox que no admiten eventos de puntero ni de tacto. | 1110 | 23 | 13 | 37 | 36 | 5229 | 24 | 13 | 3,0 |
double-tap-zoom |
No | 12-79 | No | 1110 | No | No | No | No | No | No | No | No |
manipulation |
36 | 12 | 52 No se aplica a las plataformas de Firefox que no admiten eventos de puntero ni de toque. 29 No se aplica a las plataformas de Firefox que no admiten eventos de puntero ni de tacto. | 1110 | 23 | 13 | 37 | 36 | 5229 | 24 | 9.3 | 3,0 |
none |
36 | 12 | 52 No se aplica a las plataformas de Firefox que no admiten eventos de puntero ni de toque. 29 No se aplica a las plataformas de Firefox que no admiten eventos de puntero ni de tacto. | 1110 | 23 | 13 | 37 | 36 | 5229 | 24 | 13 | 3,0 |
pinch-zoom |
56 | 12 | 85 No se aplica a las plataformas Firefox que no admiten eventos táctiles ni de puntero. | 1110 | 43 | 13 | 56 | 56 | 85 No se aplica a las plataformas Firefox que no admiten eventos táctiles ni de puntero. | 43 | 13 | 6.0 |
unidirectional-pan |
55 | 79 | Sin ver error 1285685. | No | 42 | No | 55 | 55 | Sin ver error 1285685. | 42 | No | 6.0 |
Ver también
pointer-eventsPointer Events- Blog de WebKit Tapping más receptivo en iOS
- Blog de desarrolladores de Google Hacer que el desplazamiento táctil sea rápido de forma predeterminada
- Ajuste de desplazamiento
Si posees alguna cuestión o forma de aumentar nuestro reseña te insinuamos realizar una aclaración y con deseo lo estudiaremos.