属性 CSS 触摸操作：cómo domar gestos táctiles con precisión

最后更新： 11/14/2025
作者： C 源跟踪
  • 定义 que gestos maneja el navegador：desplazamiento、pellizco-zoom 和 doble toque。
  • 组合值 (pan-x/pan-y/pan-*) y 捏缩放，或使用 el atajo 操作。
  • 注意附件：需要真实的变焦齐射。
  • 兼容性增强； iOS Safari 展示了真实的硬件和硬件。

触摸操作 CSS 插图

Cuando trabajamos con Interfaces táctiles, hay un detalle que marca la differencia entre una experiencea y otra frustrante: 决定如何管理 el navegador 和 cuáles gestiona tu codigoCSS 属性 touch-action 只要中断器允许调整军事配合即可。

Lejos de ser algo esotérico, touch-action 控制缩放比例、缩放比例以及其他预先确定的操作 que el navegador aplicaría al tocar un elemento。好的，请记住，在事件发生时，您可以使用 JavaScript 进行操作，并且可以控制真实的地图组件、游戏或游戏。

¿什么是精确的触摸动作？

简而言之， touch-action Indica al Agente de usuario qué acciones táctiles puede ejecutar de forma nativa 在页面区域和事件保护区。触觉互补 pointer-events, que solesmos asociar más a interacciones conratón, pero con un enfoque específico en gestos como el desplazamiento y el Zoom.

这样， 允许使用 el navegador haga su trabajo（desplazar、hacer Zoom）或 bloquearlo para Implementar tú las interacciones （例如，zoom interno de un mapa）罪恶干扰你的人工行为 click.

示例 touch-action CSS

句法和用法

La propiedad acepta varias Combinaciones con reglas muy concretes. Puedes declarar un único valor, o componer varios valores 兼容 调整策略和精确度。

/* Declaración típica */
#elemento {
  touch-action: pan-right pinch-zoom;
}

Si necesitas la gramática stricta, 正式杀戮:

touch-action =
  auto |
  none |
   ||  || pinch-zoom ] |
  manipulation

换句话说， puedes usar uno de los valores globales（自动、无、操纵） 最好将水平和垂直方向的组合组合起来，更多 pinch-zoom 可选地。

触摸动作的价值和它的意义

Esta propiedad ofrece valores pensados para casos muy concretos。 我希望通过 JavaScript 重新实现 gestos 相反，您可以通过自由来实现必要的条件。

auto

Deja que el navegador 消除广场和变焦的管理事项。 Es el compportamiento por defoto: el usuario puede deslizar para desplazerse y pellizcar para ampliar sin que tengas que hacer nada más.

none

完成对导航者的干预。 禁止使用 pellizco-zoom nativos 进行缩放;您可以使用 JavaScript 来实现这些功能。这是理想的地图或控制方式，可以 100% 控制。

manipulation

允许取消广场和缩放缩放，但不能取消激活 ciertos gestos no estándar como el doble toque para ampliar。 Es, en la práctica, un alias de "平移 X 平移 Y 捏合缩放“（la Combinación Explícita se mantiene válida por compatibilidad）。Al quitar el doble toque， 消除事件发生的必要性 click tras un toque，lo que mejora la respuesta de la interfaz。

pan-x

ACTIVA 横向广场与独奏德多. Puede combinarse con pan-y, pan-up, pan-down 和/或 pinch-zoom. Es un atajo que engloba pan-left y pan-right.

pan-y

ACTIVA el desplazamiento 垂直与独奏 dedo. Puede combinarse con pan-x, pan-left, pan-right 和/或 pinch-zoom。 Del Mismo modo, es un ataj que incluye pan-up y pan-down.

pan-left, pan-right, pan-up, pan-down

他们允许 在指示方向上进行单独的 dedo que empiezan 的目的。 Ojo: una vez iniciado el desplazamiento, 方向相反。 Hay un detalle que suele confundir: en terminos de interfaz, "向上摇摄“significa que el usuario arrastra el dedo hacia abajo en la pantalla para que el contenido se mueva hacia arriba；y”向左平移“这意味着 arrastrar el dedo a la derecha para que el contenido se desplace hacia la izquierda。

pinch-zoom

使能够 多次缩放和缩小广场。与价值的组合 pan-*。 En navegadores que lo Implementan, 使用代理启动并连续放大中间信息 因取消事件而无法采取行动。

组合与标准化规则

在组合方向上，存在简化规则。 No todo lo que se puede escribir es válido si hay una forma más simple例如，“pan-left pan-right“请考虑因错误的形式而导致的错误 pan-x.

罪禁运，干草组合 que sí tienen Sentido，科莫“pan-left pan-down“允许去广场 伊尼西亚·拉伊斯奎尔达·奥哈西亚·下霍。因此，没有任何缩写直接等效，因为组合是可接受的。

还请记住 普埃德斯·梅兹克拉尔·埃耶斯·佩利斯科例如，“pan-x pinch-zoom“允许在水平方向上进行缩放并进行多次缩放，然后在垂直方向上进行缩放。

Cuándo usar cada valor: 守护神

该游戏的主题是在页面上嵌入地图或游戏。 Si quieres que el gesto de pellizcar afecte al propio mapa y no al Zoom del navegador，te interesa declarar touch-action: none; 您可以使用 JavaScript 来缩放个性化。

其他场景 单独实施互动 （例如，变焦），您将优先选择 el navegador mantenga el desplazamiento nativo。 En ese caso，“touch-action: pan-x pan-y;“骰子是我们的代理人，可以用来管理一切，并让我们自由地行动。

水平方向的 UI 组件， pan-x 通常是最合适的选择。允许在不进行任何操作时进行横向缩放，在不进行任何操作时停止缩放，如果不处于活动状态，则避免与垂直页面滚动发生冲突。

如果您的首要任务是 立即响应托克帽和消除双托克帽迟滞现象, manipulation es un atajo estupendo。 Quita el doble tap para ampliar y con ello la necesidad de retrasar el click, lo que da una sensación de “snappiness” en botones y enlaces.

对无障碍的影响

一个批评点： si declaras touch-action: none; 纳韦加多尔国家放大。人物角色需要具备足够的能力，才能转换为无法访问的界面。

Cuando el contexto lo perpera, 考虑维护者 pinch-zoom 已启用 或搜索 无障碍替代方案 que no impidan el aumento. Hacer Zoom es，para muchos usuarios，una herramienta de lecture esencial；没有la deactives a la ligera。

导航者之间的兼容性

的支持 touch-action es amplio, pero con matices. 现代浏览器包括 Chrome (36+)、Edge (12+)、Firefox (52+) 和 Opera (23+) 实施主要价值的财产。

El punto delicado históricamente ha sido Safari. iOS Safari 存在限制，因此无法解决 auto y manipulation，其他价值包括版本和上下文的变量。 Safari de escritorio (13+) 的最新版本，具有显着的兼容性， 具体情况请参阅，这取决于多种组合。

Las tablas de compatibilidad públicas (las típicas que Consultamos a diario) 对社区和国家的贡献的现实化; si tu proyecto es sensible a gestos concretos, prueba en dispositivos reales。十个口号 独奏和配置与验证 el comportamiento 的 pantalla táctil podrás de forma fidedigna.

实际使用示例

Veamos algunos 赞助人声明生命的解决方案。 了解硬件触觉方面的问题 Para comprobar que la experiencia es la esperada。

1) Desactivar todos los gestos (mapa o canvas individualizado)

使用该工具可以在干扰情况下进行内部缩放。 El navegador no Interceptará ni el desplazamiento ni el pellizco.

<!-- HTML -->
<div id='mapa' class='superficie'></div>

<!-- CSS -->
.superficie {
  touch-action: none;
}

2) 允许本地缩放，单独控制变焦

如果 JavaScript 已缩放，那么导航器 管理 el 滚动 en ambos ejes para no reinventar la rueda.

.zoom-personalizado {
  touch-action: pan-x pan-y;
}

3) Desplazamiento 水平 con pellizco-zoom

Para carruseles complejos or galerías: 水平滚动 和 缩放 和 操作，sin scroll vertical nativo。

.galeria-avanzada {
  touch-action: pan-x pinch-zoom;
}

4) 最初方向的Deplazamientos

允许的便利场合 单独行动 que arrancan hacia una dirección concreta （p. ej.，para no interferir con otros componentes）。

.panel-contextual {
  touch-action: pan-left pan-down;
}

5) Atajo pragmático：操纵

Cuando Buscas una respuesta táctil contundente sin doble toque， manipulation es un gran comodín。阿尤达·埃维塔尔·雷特拉索德尔 click 帽子后。

button, a {
  touch-action: manipulation;
}

有关系 pointer-events y eventos de clic

尽管他们有时会感到困惑， touch-action y pointer-events atacan problemas distintos。第二个决定 si un elemento responde a "punteros" (ratón, táctil, lápiz) a nivel de hit-testing；初步决定 que gestos táctiles por defeto puede ejecutar el navegador 在那个地区。

此外， Desactivar gestos como el doble toque con manipulation 淘汰赛 click tras un toque en móviles。简单的Toque 和变焦的双Toque 的启动都存在延迟； Si el doble toque ya no Existe, el navegador puede despachar el click 无需等待

实施注意事项和细节

连接器 pinch-zoom, hay navegadores que 连续变焦 有意取消 JavaScript 操作。有利的组合 una sensación de inmediatez En el gesto de pellizco sobre elementos que lo alloweden。

También debes saber que, aun cuando restringes la dirección que inicia un desplazamiento, 正常情况下，卷轴方向会反转。我想体验一下绅士的能力，并在清单上或其他方面进行尝试，并以一种 mitad del gesto 的方式人工完成。

好的做法

最初，应用最小干预规则： 英勇的勇气限制了你的反应. Si te basta con pan-x没有用途 none。 Así preservas gestos nativos y accesibilidad。

第二，与真实硬件相关的组件： Lo que parece optimo con el emulador puede no reflejar la inercia y la fricción reales。 Las sensaciones táctiles son sutiles, y pequeños cambios en touch-action se notan。

第三，根据产品需要进行缩放， 替代途径 （控制文本、放大内部、对比 adecuado）。 Privar del del Zoom sin alternativa perjudica la lecture.

四方、文献和设备配合： 在 CSS 和 JavaScript 之间进行对比 如果发生冲突，请注意听众要取消事件或媒体库。

框架中的实用类

近期使用的许多框架 clases que mapean 1:1 a touch-action, lo cual acelera prototipado y cambios。习惯性遭遇变异 touch-auto, touch-none, touch-pan-x o touch-pan-y.

<div class='h-48 w-full touch-auto overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-none overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-pan-x overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-pan-y overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>

使用 CSS 来保持连贯性； Recuerda que bajo el capó siguen siendo valores de touch-action，结合错误的组合和效果。

测试与调试

Para verificar el efecto, lo Ideal es un dispositivo táctil. Algunos 在 DevTools 上进行了最新的仿真操作，但并没有再现完美的同时进行的多项操作。

如果算法没有响应，请修改优先级： ¿el elemento realmente recibe los eventos？ ¿干草听众取消 por preventDefault()? 确认 computed style de touch-action y 支票叠加 con pointer-events 节省您的时间。

Fragmentos listos para copiar

Unos cuantos atajos útiles para el día a día。 Úsalos como 基地和 ajústalos a tu caso.

/* Desactiva todo (señal de: me ocupo yo por JS) */
.superficie { touch-action: none; }

/* Solo desplazamiento horizontal */
.carrusel { touch-action: pan-x; }

/* Solo desplazamiento vertical */
.lista { touch-action: pan-y; }

/* Inicios hacia derecha + hacia arriba */
.panel { touch-action: pan-right pan-up; }

/* Pellizco-zoom + desplazamiento en cualquier eje (sin doble tap) */
.interactivo { touch-action: manipulation; }

Notas de soporte específicas

在过去， 价值 pinch-zoom 与 Chrome 版本 56 相关的热门内容, y su compportamiento ha ido refinándose. En plataformas donde el pellizco sea una acción de sistema, verifica que tu app no entra enconflico con con SO 的动作 （例如， gestos de navegación por bordes）。

如果您是公共对象，包括 iOS，请参考： 与 Chromium 不兼容的高级组合。 Las pruebas cruzadas son obligatorias cuando basas la UX en direcciones iniciales or en bloquear el doble toque.

简述心智模型

不得含糊其辞。 获得许可的首要条件 （平移 x、平移 y、平移左等）； después 决定 si añades pinch-zoom; y，si lo tuyo es la Rapidez， 我们作为 manipulation 作为捷径 a lo típico sin doble toque.

没有简化： si tu Combinación se puede escribir con un atajo, 美国 el atajo。 Es 易读 y evita valores inválidos (el clásico "pan-left pan-right" que debería ser pan-x).

植物叶植物

这是设计系统和组件库中的一部分。 定义 CSS 中频繁使用的用途 设备间的一致性。

/* Utilidades corporativas */
.u-touch-auto { touch-action: auto; }
.u-touch-none { touch-action: none; }
.u-touch-pan-x { touch-action: pan-x; }
.u-touch-pan-y { touch-action: pan-y; }
.u-touch-zoom { touch-action: pinch-zoom; }
.u-touch-sensible { touch-action: manipulation; }

Con estas clases, documentas la intención （例如，“明智的”暗示回应）en lugar de un detalle técnico aislado, lo que facilita la adopción por te de otros desarrolladores.

公共资金清单

– ¿Escogido el valor menos intrusivo que cumple tu objetivo 吗？ Si algo puede ser nativo, déjalo nativo.
– ¿Tu app sigue siendo 可用于缩放吗？ 不可牺牲任何便利性.
– ¿有比较 iOS 和 Android 的真实性吗？ La emulación es util, pero no definitiva.
– ¿Loslisteners no interfieren con el compportamiento esperado? Evita cancelaciones globales.

很清楚 touch-action 这是一种重要的触觉体验：允许对本地和控制进行限制，减少延迟 click tras el toque，y ofrece Combinaciones ricas para casos avanzados； si a eso sumas pruebas en dispositivos reales y un ojo en accesibilidad, tentrás Componentes táctiles que se sienten naturales y fiables。

相关文章：
解决：scrollview隐藏滚动条

相关文章：