Tailwind CSS - Touch Action
Tailwind CSS Touch Action 是一组预定义类，用于控制网页上触摸交互(例如滚动和缩放)的处理方式。
Tailwind CSS Touch Action 类
以下是用于控制触摸行为的 Tailwind CSS Touch Action 类列表。
| 类 | CSS 属性 |
|---|---|
| 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; |
Tailwind CSS 触摸操作类的功能
- touch-auto:允许常规触摸交互，例如点击和滚动。
- touch-none:禁用所有触摸交互，因此用户无法在元素上使用触摸操作。
- touch-pan-x:允许水平滑动，允许用户向左或向右移动。
- touch-pan-left:限制触摸仅向左移动或滚动。
- touch-pan-right:限制触摸仅向右移动或滚动。
- touch-pan-y:允许垂直滑动，允许用户向上或向下移动。
- touch-pan-up:限制触摸仅向移动或滚动向上。
- touch-pan-down:将触摸限制为仅向下移动或滚动。
- touch-pinch-zoom:允许使用两根手指捏合进行放大和缩小。
- touch-manipulation:允许移动和缩放等触摸操作，且几乎没有限制。
Tailwind CSS 触摸操作类示例
以下是 Tailwind CSS 触摸操作类的示例，展示了如何控制网页上的各种触摸行为，例如滚动、捏合和平移。
了解 Tailwind CSS 的触摸操作
此示例展示了 Tailwind CSS 中的 touch-auto 和 touch-none 类如何影响触摸交互。第一张图片允许滚动和缩放手势，而第二张图片不响应触摸手势。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h1 class="text-2xl font-bold mb-6">
Tailwind CSS Touch Action
</h1>
<h3 class="underline font-bold mb-4">
Try scrolling these images on a touchscreen.
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="border border-red-300 p-2 relative">
<h3 class="font-bold underline mb-2">Touch Action: auto</h3>
<div class="w-full h-60 overflow-auto touch-auto">
<img class="w-[150%] max-w-none h-auto"
src="https://picsum.photos/600/400?random"
alt="Placeholder Image" />
</div>
</div>
<div class="border border-red-300 p-2 relative">
<h3 class="font-bold underline mb-2">Touch Action: none</h3>
<div class="w-full h-60 overflow-auto touch-none">
<img class="w-[150%] max-w-none h-auto"
src="https://picsum.photos/600/400?random"
alt="Placeholder Image" />
</div>
</div>
</div>
</body>
</html>
通过触摸操作实现滚动方向
此示例展示了 touch-pan-x 类如何允许水平滚动(左右)同时限制垂直滚动，以及 touch-pan-y 类如何允许垂直滚动(上下)同时限制水平滚动，因此您只能在触摸屏上沿一个方向移动图像。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h1 class="text-2xl font-bold mb-6">
Tailwind CSS Touch Action
</h1>
<h3 class="underline font-bold mb-4">
Try scrolling these images on a touchscreen.
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="border border-red-300 p-2 relative">
<h3 class="font-bold underline mb-2">Touch Action: pan-x</h3>
<div class="w-full h-60 overflow-auto touch-pan-up">
<img class="w-[200%] max-w-none h-auto"
src="https://picsum.photos/600/400?random"
alt="Placeholder Image"/>
</div>
</div>
<div class="border border-red-300 p-2 relative">
<h3 class="font-bold underline mb-2">Touch Action: pan-y</h3>
<div class="w-full h-60 overflow-auto touch-pan-down">
<img class="w-[200%] max-w-none h-auto"
src="https://picsum.photos/600/400?random"
alt="Placeholder Image" />
</div>
</div>
</div>
</body>
</html>
Tailwind CSS 向上平移和向下平移
此示例展示了 touch-pan-up 类如何允许用户向上滚动图像，而 touch-pan-down 类如何允许向下滚动图像，从而展示了触摸交互如何限制在触摸屏上的特定方向上。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h1 class="text-2xl font-bold mb-6">
Tailwind CSS Touch Action
</h1>
<h3 class="underline font-bold mb-4">
Try scrolling these images on a touchscreen
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="border border-red-300 p-2 relative">
<h3 class="font-bold underline mb-2">Touch Action: pan-up</h3>
<div class="w-full h-60 overflow-auto touch-pan-up">
<img class="w-[200%] max-w-none h-auto"
src="https://picsum.photos/600/400?random"
alt="Placeholder Image" />
</div>
<p class="mt-2 text-sm">Scroll up</p>
</div>
<div class="border border-red-300 p-2 relative">
<h3 class="font-bold underline mb-2">Touch Action: pan-down</h3>
<div class="w-full h-60 overflow-auto touch-pan-down">
<img class="w-[200%] max-w-none h-auto"
src="https://picsum.photos/600/400?random"
alt="Placeholder Image" />
</div>
<p class="mt-2 text-sm">Scroll down</p>
</div>
</div>
</body>
</html>
使用 Tailwind CSS 实现捏合缩放和默认触控行为
此示例演示了 touch-pinch-zoom 类如何通过捏合手势实现放大和缩小，以及如何使用 touch-manipulation 类实现所有标准触控交互，包括滚动和缩放。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h1 class="text-2xl font-bold mb-6">
Tailwind CSS Touch Action
</h1>
<h3 class="underline font-bold mb-4">
Try scrolling these images on a touchscreen.
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="border border-red-300 p-2 relative">
<h3 class="font-bold underline mb-2">Touch Action: pinch-zoom</h3>
<div class="w-full h-60 overflow-auto touch-pinch-zoom">
<img class="w-[150%] max-w-none h-auto"
src="https://picsum.photos/600/400?random"
alt="Placeholder Image" />
</div>
<p class="mt-2">Zoom with pinch.</p>
</div>
<div class="border border-red-300 p-2 relative">
<h3 class="font-bold underline mb-2">Touch Action: manipulation</h3>
<div class="w-full h-60 overflow-auto touch-manipulation">
<img class="w-[150%] max-w-none h-auto"
src="https://picsum.photos/600/400?random"
alt="Placeholder Image" />
</div>
<p class="mt-2">Default touch gestures.</p>
</div>
</div>
<p class="mt-4 text-center">Use the <strong>touch-*</strong>
classes to control touch interactions.
</p>
</body>
</html>
