Touch Action

📌 مفهوم

  • Touch Action مشخص می‌کند که مرورگر چگونه باید رفتارهای لمسی (gesture) را روی یک عنصر مدیریت کند.

  • این ویژگی برای تجربه بهتر لمس روی موبایل و تبلت استفاده می‌شود.

  • کنترل اسکرول، زوم و gestureهای لمسی با این ویژگی انجام می‌شود.

📑 کلاس‌های Tailwind

کلاستوضیح
touch-autoمرورگر تصمیم می‌گیرد؛ رفتار لمسی پیش‌فرض
touch-noneهیچ gesture لمسی اعمال نمی‌شود
touch-pan-xاجازه اسکرول افقی (pan)
touch-pan-yاجازه اسکرول عمودی (pan)
touch-pan-leftاجازه اسکرول فقط به چپ
touch-pan-rightاجازه اسکرول فقط به راست
touch-pan-upاجازه اسکرول فقط به بالا
touch-pan-downاجازه اسکرول فقط به پایین
touch-pinch-zoomاجازه زوم با gesture pinch
touch-manipulationفعال‌سازی manipulation پیش‌فرض مرورگر (scroll + zoom)

💡 کلاس‌ها برای کنترل دقیق رفتار لمسی روی عناصر کاربرد دارند، به‌خصوص در صفحات موبایل.

📌 مثال

<div class="touch-none">
  <p>این بخش هیچ gesture لمسی ندارد</p>
</div>

<div class="touch-pan-y">
  <p>این بخش فقط اسکرول عمودی دارد</p>
</div>

<div class="touch-pan-x touch-pinchi-zoom">
  <p>این بخش اسکرول افقی و زوم gesture دارد</p>
</div>

  • touch-none : هیچ gesture لمسی اعمال نمی‌شود.

  • touch-pan-y : اسکرول فقط عمودی فعال است.

  • touch-pinchi-zoom : امکان زوم با gesture pinch فراهم می‌شود.

📌 نکات مهم

  1. استفاده از touch-action باعث بهبود عملکرد لمس در مرورگرها و دستگاه‌های لمسی می‌شود.

  2. برای canvas و WebGL، معمولاً از touch-none یا touch-manipulation استفاده می‌شود تا اسکرول ناخواسته جلوگیری شود.

  3. ترکیب با کلاس‌های overflow و scroll-snap، تجربه لمسی روان و بدون خطا ایجاد می‌کند.