Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >touch-action

touch-action

touch-action: auto | none | pan-x | pan-y | pinch-zoom | manipulation

Auf einem Touchscreen scrollt der Browser die Seite mit einem Finger und zoomt sie mit zwei Fingern. Verarbeitet Ihr JavaScript die Gesten selbst (Zeichnen, Ziehen, ein eigener Schieberegler), sagt touch-action dem Browser, welche Gesten er nicht selbst ausführen soll. Auf die Maus oder einen Stift mit Taste wirkt es nicht.

Werte

  • auto – der Browser verarbeitet alle Gesten.
  • none – keine; JavaScript bekommt alle Berührungen (eine Zeichenfläche, ein Spiel).
  • pan-x / pan-y – nur waagerechtes / senkrechtes Verschieben; auch pan-x pan-y lässt sich kombinieren.
  • pinch-zoom – Zoomen mit zwei Fingern; Chrome ab 56, Firefox ab 85, Safari ab 13.
  • manipulation – Verschieben und Zoomen, aber kein Zoomen per Doppeltippen.
  • pan-left, pan-right, pan-up, pan-down – nur in eine Richtung; nur Chrome (Stand Oktober 2026).

Initialwert: auto. Vererbt: nein. Gilt für: alle Elemente außer gewöhnlichen Inline-Elementen, Tabellenzeilen und -spalten.

Beispiele

Eine Zeichenfläche, auf der ein Finger zeichnet, statt die Seite zu scrollen:

<canvas class="canvas" width="300" height="200"></canvas>

.canvas {
  touch-action: none;
  border: 1px solid #90a4ae;
}

Das Ergebnis: Ziehen mit dem Finger über die Zeichenfläche schickt pointermove-Ereignisse an JavaScript, und die Seite darunter bewegt sich nicht. Außerhalb der Zeichenfläche scrollt die Seite normal.

Ein Karussell, das ein waagerechtes Wischen per JavaScript steuert – ein senkrechtes Wischen scrollt weiter die Seite:

<div class="carousel">…</div>

.carousel { touch-action: pan-y; }

Das Ergebnis: Ein senkrechtes Wischen über dem Karussell scrollt die Seite wie überall sonst, ein waagerechtes Wischen verarbeitet das Skript des Karussells.

Worauf Sie achten sollten

  • Es wird nicht vererbt, aber eine Geste geht nur durch, wenn sie das Element und alle seine Vorfahren bis zum Scroll-Container erlauben. touch-action: none an body schaltet so das Scrollen der Seite mit dem Finger komplett aus.
  • Wegen der Verzögerung beim Tippen müssen Sie es nicht mehr setzen – Browser warten auf Seiten mit <meta name="viewport" content="width=device-width"> nicht auf ein Doppeltippen.
  • Kombinieren lassen sich nur die Werte für Verschieben und Zoomen (pan-x pan-y pinch-zoom); none, auto und manipulation stehen allein.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit September 2019, gilt als weithin verfügbar seit März 2022. Ab Version: Chrome 36, Firefox 52, Safari 13. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
pointer-events
user-select
overscroll-behavior
cursor