Scroll Margin

📌 مفهوم

  • Scroll Margin فاصله‌ای است که وقتی صفحه یا یک کانتینر به یک المان اسکرول می‌کند، قبل از رسیدن به المان، اعمال می‌شود.

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

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

📑 کلاس‌های Tailwind

کلاستوضیح
scroll-m-0فاصله‌ی اسکرول صفر (پیش‌فرض)
scroll-m-1 … scroll-m-96فاصله‌های مختلف بر اساس مقیاس Tailwind (rem)
scroll-mx-*تعیین فاصله افقی (left/right)
scroll-my-*تعیین فاصله عمودی (top/bottom)
scroll-ml-*تعیین فاصله از سمت چپ
scroll-mr-*تعیین فاصله از سمت راست
scroll-mt-*تعیین فاصله از بالا
scroll-mb-*تعیین فاصله از پایین

📌 مثال

<div class="h-screen overflow-auto scroll-smooth scroll-mt-16">
  <a href="#section2" class="block p-4 bg-blue-600 text-white">Go to Section 2</a>
  
  <div class="h-[1500px]"></div>
  
  <div id="section2" class="h-64 bg-green-400">
    Section 2
  </div>
</div>

  • وقتی روی لینک کلیک می‌کنید، صفحه به آرامی اسکرول می‌کند و فاصله 16 (rem) از بالای صفحه ایجاد می‌کند.

📌 نکات

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

    • Scroll Margin: فاصله‌ی هدف اسکرول از لبه نمایش

    • Scroll Padding: فاصله‌ای که درون کانتینر هنگام اسکرول لحاظ می‌شود

  • ترکیب scroll-smooth + scroll-mt-* برای لینک‌های داخلی بسیار کاربردی است.