互动性
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; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 touch-pan-y
和 touch-pinch-zoom
等工具来控制元素在触摸屏上的滚动(平移)和缩放(捏合)方式:
¥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
<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>
响应式设计(Responsive design)
¥Responsive design
在 touch-action
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="touch-pan-x md:touch-auto ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。