📌 مفهوم

• Scroll Snap Align مشخص می‌کند که یک المان داخل کانتینر اسکرول‌پذیر در کجا تراز شود وقتی که اسکرول به پایان می‌رسد.

• معمولاً همراه با Scroll Snap Container (snap-x یا snap-y) استفاده می‌شود تا اسکرول به صورت خودکار و دقیق به یک نقطه مشخص بچسبد.

📑 کلاس‌های Tailwind

⚡ این کلاس‌ها روی کودک‌های کانتینر snap اعمال می‌شوند، نه روی خود کانتینر.

📌 مثال

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

• snap-x : اسکرول افقی

• snap-mandatory : اطمینان از اسنپ کردن هر المان

• هر بچ با snap-start, snap-center, snap-end به ترتیب در شروع، مرکز، یا انتهای کانتینر قرار می‌گیرد.

📌 نکات

• Scroll Snap Align فقط در کانتینرهایی که overflow دارند کار می‌کند.

• می‌توان همراه با scroll-padding استفاده کرد تا فاصله مناسب از لبه کانتینر حفظ شود.

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