1. 交互性
  2. touch-action

交互性

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-ytouch-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>

响应式设计

前缀a touch-action 实用工具类 带有断点变体,如 md:,仅在以下情况下应用实用工具类中等 屏幕尺寸及以上

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

了解更多关于在变体文档中使用变体的信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策