Scroll Padding

📌 مفهوم

  • Scroll Padding فاصله‌ای است که وقتی یک المان درون یک کانتینر اسکرول‌پذیر اسکرول می‌شود، بین لبه‌های کانتینر و المان‌های داخلی رعایت می‌شود.

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

  • معمولاً وقتی از لینک‌های داخلی یا anchor links داخل کانتینر استفاده می‌کنیم، به همراه scroll-padding المان‌ها درست نمایش داده می‌شوند.

📑 کلاس‌های Tailwind

کلاستوضیح
scroll-p-0padding اسکرول صفر (پیش‌فرض)
scroll-p-1 … scroll-p-96padding‌های مختلف بر اساس مقیاس Tailwind (rem)
scroll-px-*padding افقی (left/right)
scroll-py-*padding عمودی (top/bottom)
scroll-pl-*padding سمت چپ
scroll-pr-*padding سمت راست
scroll-pt-*padding بالا
scroll-pb-*padding پایین

📌 مثال

<div class="h-64 overflow-auto scroll-smooth scroll-pt-16 scroll-pr-8">
  <div class="h-[1500px] w-[600px] bg-gray-200">
    <div class="mt-96 p-4 bg-blue-500 text-white">Scroll Target</div>
  </div>
</div>

  • وقتی اسکرول می‌کنید، محتوا از بالا 16 و از راست 8 فاصله دارد.

  • برای لینک‌های داخلی در کانتینر، این کار باعث می‌شود المان‌ها در جای مناسب نمایش داده شوند.

📌 نکات

  • scroll-padding با scroll-margin متفاوت است:

    • Scroll Margin: فاصله هدف اسکرول از لبه‌ی viewport یا صفحه

    • Scroll Padding: فاصله محتوا از لبه کانتینر هنگام اسکرول

  • ترکیب scroll-smooth + scroll-padding برای کانتینرهای بزرگ یا بخش‌های داخلی بسیار کاربردی است.