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

<!-- [!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>

响应式设计

使用 md: 等断点变体为 touch-action 工具类添加前缀，使其仅在中等及以上屏幕尺寸生效：

<div class="touch-pan-x md:touch-auto ...">
 <!-- ... -->
</div>

在 变体文档 中了解如何使用变体。