📌 مفهوم

• Scroll Snap Type مشخص می‌کند که چگونه اسکرول روی المان‌ها در snap container عمل کند.

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

• با Scroll Snap Type می‌توان جهت و رفتار snap را تعیین کرد.

📑 کلاس‌های Tailwind

💡 کلاس‌های snap-x، snap-y و snap-both محور snap را مشخص می‌کنند.
💡 کلاس‌های snap-mandatory و snap-proximity شدت توقف اسکرول را کنترل می‌کنند.

📌 مثال

<div class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth">
  <div class="snap-start w-64 h-48 bg-red-500 m-2">Item 1</div>
  <div class="snap-start w-64 h-48 bg-green-500 m-2">Item 2</div>
  <div class="snap-start w-64 h-48 bg-blue-500 m-2">Item 3</div>
</div>

• snap-x : snap فقط در جهت افقی اعمال می‌شود.

• snap-mandatory : اسکرول نمی‌تواند از المان‌های snap رد شود.

• scroll-smooth : حرکت اسکرول به شکل نرم و روان انجام می‌شود.

📌 نکات مهم

1. تنظیم محور اسکرول (snap-x یا snap-y) الزامی است تا Snap Effect درست عمل کند.

2. ترکیب با Snap Stop (snap-always یا snap-normal) به شما کنترل کامل روی توقف المان‌ها می‌دهد.

3. برای بهبود UX بهتر است از scroll-smooth استفاده شود تا حرکت اسکرول نرم و طبیعی باشد.