touch-action CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2019 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die touch-action-Eigenschaft CSS legt fest, wie der Bereich eines Elements von einem Benutzer mit Touchscreen manipulierbar ist (z.B. durch im Browser integrierte Zoom-Funktionen).
Standardmäßig werden Scroll- und Pinch-Gesten ausschließlich vom Browser verarbeitet. Eine Anwendung, die Zeigerereignisse verwendet, erhält ein pointercancel-Ereignis, wenn der Browser beginnt, eine Touch-Geste zu verarbeiten. Indem explizit festgelegt wird, welche Gesten vom Browser verarbeitet werden sollen, kann eine Anwendung in den pointermove- und pointerup-Listenern eigenes Verhalten für die verbleibenden Gesten bereitstellen. Anwendungen, die Touch-Ereignisse verwenden, deaktivieren die Verarbeitung von Gesten durch den Browser, indem sie preventDefault() aufrufen, sollten jedoch auch touch-action verwenden, um sicherzustellen, dass der Browser die Absicht der Anwendung kennt, bevor irgendwelche Ereignis-Listener aufgerufen wurden.
Wenn eine Geste beginnt, schneidet der Browser die touch-action-Werte des berührten Elements und seiner Vorfahren bis zu dem Element, das die Geste implementiert, d.h. dem ersten enthaltenden scrollbaren Element, ab. Dies bedeutet, dass touch-action in der Praxis typischerweise nur auf oberste Elemente angewendet wird, die ein benutzerdefiniertes Verhalten haben, ohne dass touch-action explizit auf die Nachfolger dieser Elemente angewendet werden muss.
Hinweis:
Nach Beginn einer Geste haben Änderungen an touch-action keinen Einfluss mehr auf das Verhalten der aktuellen Geste.
Syntax
/* 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: revert;
touch-action: revert-layer;
touch-action: unset;
Die touch-action-Eigenschaft kann entweder wie folgt angegeben werden:
- Eines der Schlüsselwörter
auto,none,manipulationoder - eines der Schlüsselwörter
pan-x,pan-left,pan-rightund/oder eines der Schlüsselwörterpan-y,pan-up,pan-down, plus optional das Schlüsselwortpinch-zoom.
Werte
auto-
Ermöglicht die Verarbeitung aller Scroll- und Zoom-Gesten durch den Browser.
none-
Deaktiviert die Verarbeitung aller Scroll- und Zoom-Gesten durch den Browser.
pan-x-
Aktiviert Ein-Finger-horizontale-Scroll-Gesten. Kann mit pan-y, pan-up, pan-down und/oder pinch-zoom kombiniert werden.
pan-y-
Aktiviert Ein-Finger-vertikale-Scroll-Gesten. Kann mit pan-x, pan-left, pan-right und/oder pinch-zoom kombiniert werden.
manipulation-
Aktiviert Scroll- und Pinch-Zoom-Gesten, deaktiviert jedoch zusätzliche nicht standardisierte Gesten wie Doppeltippen zum Zoomen. Das Deaktivieren des Doppeltippens zum Zoomen beseitigt die Notwendigkeit für Browser, die Erzeugung von click-Events zu verzögern, wenn der Benutzer den Bildschirm antippt. Dies ist ein Alias für "pan-x pan-y pinch-zoom" (was aus Kompatibilitätsgründen selbst weiterhin gültig ist).
pan-left,pan-right,pan-up,pan-down-
Aktiviert Ein-Finger-Gesten, die mit dem Scrollen in die angegebene(n) Richtung(en) beginnen. Sobald das Scrollen begonnen hat, kann die Richtung dennoch umgekehrt werden. Beachten Sie, dass Scrollen "nach oben" (pan-up) bedeutet, dass der Benutzer seinen Finger nach unten auf der Bildschirmoberfläche zieht, und ebenso bedeutet pan-left, dass der Benutzer seinen Finger nach rechts zieht. Mehrere Richtungen können kombiniert werden, es sei denn, es gibt eine einfachere Darstellung (zum Beispiel ist "pan-left pan-right" ungültig, da "pan-x" einfacher ist, aber "pan-left pan-down" ist gültig).
pinch-zoom-
Aktiviert Mehrfinger-Scroll- und Zoom-Gesten der Seite. Dies kann mit allen pan- Werten kombiniert werden.
Barrierefreiheit
Eine Erklärung von touch-action: none; kann die Bedienung der Zoom-Funktionen eines Browsers behindern. Dadurch können Personen mit Sehbehinderungen möglicherweise den Inhalt der Seite nicht lesen und verstehen.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente außer: nicht ersetzte Inlineelemente, Tabellenzeilen, Zeilengruppen, Tabellenspalten und Spaltengruppen |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
touch-action =
auto |
none |
[ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] |
manipulation
Beispiele
Deaktivieren aller Gesten
Die häufigste Verwendung ist das Deaktivieren aller Gesten auf einem Element (und dessen nicht scrollbaren Nachfolgern), das sein eigenes Zieh- und Zoomverhalten bereitstellt – wie eine Karte oder Spielfläche.
HTML
<div id="map"></div>
CSS
#map {
height: 150vh;
width: 70vw;
background: linear-gradient(blue, green);
touch-action: none;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Compatibility # touch-action |
| Pointer Events # the-touch-action-css-property |
Browser-Kompatibilität
Siehe auch
pointer-events- Zeiger-Ereignisse
- WebKit Blog More Responsive Tapping on iOS
- Google Developers Blog Making touch scrolling fast by default
- Scroll Snap