Scroll Behavior

📌 مفهوم

  • Scroll Behavior مشخص می‌کند که هنگام پیمایش (scroll) به یک المان یا بخش صفحه، چگونه حرکت کند.

  • معمولاً برای لینک‌های داخلی (anchor links) یا اسکریپت‌هایی که صفحه را می‌اسکرول می‌کنند کاربرد دارد.

📑 کلاس‌های Tailwind

کلاستوضیح
scroll-autoاسکرول به صورت لحظه‌ای (instant) انجام می‌شود (پیش‌فرض)
scroll-smoothاسکرول به صورت نرم و روان (smooth) انجام می‌شود

📌 مثال

<div class="h-screen bg-blue-200">
  <a href="#section2" class="scroll-smooth text-white p-4 bg-blue-600">Go to Section 2</a>
</div>

<div id="section2" class="h-screen bg-green-200">
  Section 2
</div>

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

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

📌 نکات

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

  • می‌توان این ویژگی را روی divهایی که overflow دارند نیز استفاده کرد:

<div class="h-64 overflow-auto scroll-smooth">
  <p>محتوای طولانی...</p>
</div>