Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >touch-action

touch-action

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

Na ekranie dotykowym przeglądarka przewija stronę jednym palcem i powiększa ją dwoma. Jeśli twój JavaScript obsługuje gesty sam (rysowanie, przeciąganie, własny suwak), touch-action mówi przeglądarce, których gestów ma sama nie wykonywać. Na mysz ani rysik z przyciskiem nie działa.

Wartości

  • auto – przeglądarka obsługuje wszystkie gesty.
  • none – żadnych; JavaScript dostaje wszystkie dotknięcia (płótno do rysowania, gra).
  • pan-x / pan-y – tylko przesuwanie poziome / pionowe; można też połączyć pan-x pan-y.
  • pinch-zoom – powiększanie dwoma palcami; Chrome od 56, Firefox od 85, Safari od 13.
  • manipulation – przesuwanie i powiększanie, ale bez powiększania podwójnym stuknięciem.
  • pan-left, pan-right, pan-up, pan-down – tylko w jednym kierunku; tylko Chrome (stan na październik 2026).

Wartość początkowa: auto. Dziedziczona: nie. Dotyczy: wszystkich elementów oprócz zwykłych elementów liniowych, wierszy i kolumn tabeli.

Przykłady

Płótno do rysowania, na którym palec rysuje, zamiast przewijać stronę:

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

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

Wynik: przeciąganie palcem po płótnie wysyła do JavaScriptu zdarzenia pointermove, a strona pod nim się nie rusza. Poza płótnem strona przewija się normalnie.

Karuzela, którą poziome przesunięcie palcem steruje przez JavaScript – pionowe przesunięcie nadal przewija stronę:

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

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

Wynik: pionowe przesunięcie palcem nad karuzelą przewija stronę jak wszędzie indziej, poziome przesunięcie obsługuje skrypt karuzeli.

Na co uważać

  • Nie jest dziedziczona, ale gest przejdzie tylko wtedy, gdy pozwalają na niego element i wszyscy jego przodkowie aż do kontenera przewijania. touch-action: none na body wyłącza więc całkowicie przewijanie strony palcem.
  • Z powodu opóźnienia przy stuknięciu nie musisz jej już ustawiać – przeglądarki na stronach z <meta name="viewport" content="width=device-width"> nie czekają na podwójne stuknięcie.
  • Łączyć można tylko wartości dla przesuwania i powiększania (pan-x pan-y pinch-zoom); none, auto i manipulation stoją same.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od września 2019, za szeroko dostępne uznawane od marca 2022. Od wersji: Chrome 36, Firefox 52, Safari 13. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
pointer-events
user-select
overscroll-behavior
cursor