Lzh on GitHub

touch-action

用于控制元素在触摸屏上如何滚动和缩放的工具。

快速参考

类别样式
touch-autotouch-action: auto;
touch-nonetouch-action: none;
touch-pan-xtouch-action: pan-x;
touch-pan-lefttouch-action: pan-left;
touch-pan-righttouch-action: pan-right;
touch-pan-ytouch-action: pan-y;
touch-pan-uptouch-action: pan-up;
touch-pan-downtouch-action: pan-down;
touch-pinch-zoomtouch-action: pinch-zoom;
touch-manipulationtouch-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>

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