--- title: touch-action slug: Web/CSS/touch-action tags: - CSS - CSS Eigenschaft - Referenz - Web translation_of: Web/CSS/touch-action --- <div>{{ CSSRef }}{{SeeCompatTable}}</div> <h2 id="Summary" name="Summary">Übersicht</h2> <p>Die CSS-Eigenschaft <code>touch-action</code> spezifiziert, ob das Standardverhalten des Browsers ausgeführt wird oder nicht (z. B. durch Scrollen oder Zoomen).</p> <p>{{cssinfo}}</p> <h2 id="Syntax" name="Syntax">Syntax</h2> {{csssyntax}} <h3 id="Values" name="Values">Werte</h3> <dl> <dt><code>auto</code></dt> <dd>Der User-Agent führt das voreingestellte Verhalten für Berührungen aus, wie die Manipulation des Elements durch Scrollen oder Zoomen bei Berührungen, die in dem Element beginnen.</dd> <dt><code>none</code></dt> <dd>Berührungen, die auf dem Element beginnen, lösen nicht das Standardverhalten aus.</dd> <dt><code>pan-x</code></dt> <dd>Der User-Agent reagiert nur auf Berührungen, die das horizontale Scrollen des nächsten scrollbaren Elements auslösen.</dd> <dt><code>pan-y</code></dt> <dd>Der User-Agent reagiert nur auf Berührungen, die das vertikale Scrollen des nächsten scrollbaren Elements auslösen.</dd> <dt><code>manipulation</code></dt> <dd>Der User-Agent reagiert nur auf Berührungen, die dem Scrollen oder dem ununterbrochenen Zoomen dienen.</dd> </dl> <h2 id="Example" name="Example">Beispiel</h2> <pre class="brush: css">.list { width: 200px; height: 50px; overflow-x: scroll; } .list > .entry { touch-action: pan-x; } </pre> <h2 id="Specifications" name="Specifications">Spezifikationen</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Spezifikation</th> <th scope="col">Status</th> <th scope="col">Anmerkung</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td> <td>{{Spec2('Pointer Events')}}</td> <td> </td> </tr> </tbody> </table> <h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> {{compat("css.properties.touch-action")}}