touch-action
En esta página
| Clase | Propiedades CSS |
|---|---|
touch-auto |
touch-action: auto; |
touch-none |
touch-action: none; |
touch-pan-x |
touch-action: pan-x; |
touch-pan-left |
touch-action: pan-left; |
touch-pan-right |
touch-action: pan-right; |
touch-pan-y |
touch-action: pan-y; |
touch-pan-up |
touch-action: pan-up; |
touch-pan-down |
touch-action: pan-down; |
touch-pinch-zoom |
touch-action: pinch-zoom; |
touch-manipulation |
touch-action: manipulation; |
Examples#
Basic example#
Use utilities like touch-pan-y and touch-pinch-zoom to control how an element can be scrolled (panned) and zoomed (pinched) on touchscreens:
{
touch-auto
touch-none
touch-pan-x
touch-pan-y
<!-- [!code classes:overflow-auto,touch-auto,touch-none,touch-pan-x,touch-pan-y] -->
<div class="h-48 w-full touch-auto overflow-auto ...">
<img class="h-auto w-[150%] max-w-none" src="..." />
</div>
<div class="h-48 w-full touch-none overflow-auto ...">
<img class="h-auto w-[150%] max-w-none" src="..." />
</div>
<div class="h-48 w-full touch-pan-x overflow-auto ...">
<img class="h-auto w-[150%] max-w-none" src="..." />
</div>
<div class="h-48 w-full touch-pan-y overflow-auto ...">
<img class="h-auto w-[150%] max-w-none" src="..." />
</div>