交互性
touch-action
用于控制在触摸屏上如何滚动和缩放元素的实用工具。
| 类 | 样式 |
|---|---|
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; |
示例
基本示例
使用像 touch-pan-y 和 touch-pinch-zoom 这样的实用工具来控制元素在触摸屏上如何滚动（平移）和缩放（捏合）
尝试在触摸屏上平移这些图像
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>响应式设计
前缀使用像 touch-action 实用工具 结合像 md: 这样的断点变体，以便仅在中等 屏幕尺寸及以上时应用该实用工具
<div class="touch-pan-x md:touch-auto ..."> <!-- ... --></div>了解更多关于在变体文档中使用变体的信息。
