touch-action

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2019.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS touch-action définit comment la zone d'un élément peut être manipulée par un·e utilisateur·ice d'écran tactile (par exemple, en utilisant les fonctionnalités de zoom intégrées au navigateur).

Par défaut, les gestes de panoramique (défilement) et de pincement sont gérés exclusivement par le navigateur. Une application utilisant les évènements de pointeur, recevra un évènement pointercancel lorsque le navigateur commencera à gérer un geste tactile. En définissant explicitement quels gestes doivent être gérés par le navigateur, une application peut fournir son propre comportement dans les écouteurs pointermove et pointerup pour les gestes restants. Les applications utilisant les évènements tactiles désactivent la gestion des gestes par le navigateur en appelant preventDefault(), mais elles doivent également utiliser touch-action pour s'assurer que le navigateur connaît l'intention de l'application avant que les écouteurs d'évènements ne soient invoqués.

Lorsque qu'un geste est initié, le navigateur croise les valeurs de touch-action de l'élément touché et de ses ancêtres, jusqu'à celui qui implémente le geste (en d'autres termes, le premier élément contenant un défilement). Cela signifie qu'en pratique, touch-action est généralement appliqué uniquement aux éléments de niveau supérieur qui ont un comportement personnalisé, sans avoir besoin de définir touch-action explicitement sur les descendants de cet élément.

Note : Après le début d'un geste, les modifications apportées à touch-action n'auront aucun impact sur le comportement du geste en cours.

Syntaxe

css

/* Valeurs avec un mot-clé */
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;

/* Valeurs globales */
touch-action: inherit;
touch-action: initial;
touch-action: revert;
touch-action: revert-layer;
touch-action: unset;

La propriété touch-action peut être définie grâce à :

l'un des mots-clés parmi auto, none, manipulation ou
un mot-clé parmi pan-x, pan-left, pan-right, et/ou un mot-clé parmi pan-y, pan-up, pan-down et éventuellement le mot-clé pinch-zoom.

Valeurs

auto: Activer la gestion par le navigateur de tous les gestes de panoramique et de zoom.
none: Désactiver la gestion par le navigateur de tous les gestes de panoramique et de zoom.
pan-x: Activer les gestes de panoramique horizontal à un doigt. Peut être combiné avec pan-y, pan-up, pan-down et/ou pinch-zoom.
pan-y: Activer les gestes de panoramique vertical à un doigt. Peut être combiné avec pan-x, pan-left, pan-right et/ou pinch-zoom.
manipulation: Activer les gestes de panoramique et de zoom, mais désactiver les gestes non standard supplémentaires tels que le double-tap pour zoomer. La désactivation du double-tap pour zoomer supprime la nécessité pour les navigateurs de retarder la génération des évènements de clic lorsque l'utilisateur·ice tape sur l'écran. Il s'agit d'un alias pour « pan-x pan-y pinch-zoom » (qui, pour des raisons de compatibilité, est lui-même encore valide).
pan-left, pan-right, pan-up, pan-down: Activer les gestes à un doigt qui commencent par un défilement dans la ou les direction(s) donnée(s). Une fois le défilement commencé, la direction peut encore être inversée. Notez que défiler « vers le haut » (pan-up) signifie que l'utilisateur·ice fait glisser son doigt vers le bas sur la surface de l'écran, et de même pan-left signifie que l'utilisateur·ice fait glisser son doigt vers la droite. Plusieurs directions peuvent être combinées sauf lorsqu'il existe une représentation plus simple (par exemple, « pan-left pan-right » est invalide puisque « pan-x » est plus simple, mais « pan-left pan-down » est valide).
pinch-zoom: Activer le panoramique et le zoom à plusieurs doigts sur la page. Cela peut être combiné avec n'importe laquelle des valeurs pan-.

Accessibilité

Une déclaration touch action: none; empêchera le navigateur de zoomer. Cela peut empêcher les personnes à faible vision de lire et de comprendre le contenu de la page.

Définition formelle

Valeur initiale	`auto`
Applicabilité	tous les éléments sauf : les éléments en ligne non remplacés, les lignes, les groupes de lignes, les colonnes et les groupes de colonnes pour les tableaux
Héritée	non
Valeur calculée	comme défini
Type d'animation	Non animable

Syntaxe formelle

touch-action = 
  auto                                                |
  none                                                |
  [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ]  |
  manipulation

Exemples

Désactiver tous les gestes

L'utilisation la plus courante consiste à désactiver tous les gestes sur un élément (et ses descendants non défilables) qui fournit son propre comportement de glissement et de zoom — comme une carte ou une surface de jeu.

HTML

html

<div id="map"></div>

CSS

css

#map {
  height: 150vh;
  width: 70vw;
  background: linear-gradient(blue, green);
  touch-action: none;
}

Résultat

Spécifications

Spécification
Compatibility # touch-action
Pointer Events # the-touch-action-css-property

Compatibilité des navigateurs

Voir aussi

La propriété pointer-events
Les évènements de pointage
Un billet du blog WebKit : une gestion plus responsive du toucher sur iOS ^(angl.)
Google Developers Blog Rendre le défilement tactile rapide, par défaut ^(angl.)
L'accroche au défilement

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 3 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu