📌 مفهوم

• Scroll Snap Stop مشخص می‌کند که یک المان اجازه ندهد اسکرول از آن رد شود وقتی در حالت snap است.

• وقتی به یک المان snap می‌کنیم، معمولاً اسکرول می‌تواند سریع حرکت کند و از آن عبور کند.

• با استفاده از Scroll Snap Stop، می‌توانیم المان را اجباری نگه داریم تا اسکرول دقیقاً روی آن متوقف شود.

📑 کلاس‌های Tailwind

⚡ این کلاس‌ها روی کودک‌های snap container اعمال می‌شوند، درست مثل Scroll Snap Align.

📌 مثال

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

• snap-always : اطمینان از اینکه اسکرول روی المان توقف کامل دارد.

• snap-normal : المان ممکن است با اسکرول سریع رد شود.

• ترکیب با snap-x و snap-mandatory باعث می‌شود تجربه اسکرول حرفه‌ای و دقیق داشته باشید.

📌 نکات

• Scroll Snap Stop فقط روی کودک المان‌های snap container تاثیر دارد.

• ترکیب snap-always با scroll-smooth بهترین تجربه را برای اسکرول فراهم می‌کند.

• برای المان‌های مهم یا تاکید روی بخش خاص، حتماً از snap-always استفاده کنید.