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;

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 touch-pan-ytouch-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>

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号