scroll-m-* / scroll-p-*
هامش وحشو التمرير scroll-m-* / scroll-p-*
يضبط المسافة الاحتياطية عند التمرير لعنصر معيّن — يُستخدم مع scroll-snap وروابط التنقّل الداخلي (anchor).
scroll-margin (scroll-m-*) يضيف مسافة احتياطية حول عنصر عند التمرير إليه — مفيد جدًّا مع scroll-snap لإبعاد العنصر الملتقَط قليلًا عن حافة الحاوية بدل أن يلتصق بها تمامًا. scroll-padding (scroll-p-*) يعمل عكسيًّا على الحاوية نفسها: يحدّد مسافة من حافّتها لا يجب أن يقترب منها أي عنصر ملتقَط.
تُستخدم الخاصّيتان أيضًا خارج سياق scroll-snap: مع روابط التنقّل الداخلي (#section-2) حيث يوجد شريط تنقّل ثابت (sticky) يغطّي جزءًا من أعلى الصفحة — scroll-mt-20 على القسم المستهدف يمنع اختفاء عنوانه خلف الشريط عند القفز إليه.
الصياغة
class="scroll-ml-6" /* هامش تمرير يساري على عنصر */ class="scroll-mt-20" /* يمنع اختفاء القسم خلف شريط ثابت */
⚡ جرّب بنفسك
عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.
<script src="https://cdn.tailwindcss.com"></script> <div class="flex snap-x snap-mandatory gap-4 overflow-x-scroll p-4"> <div class="h-24 w-40 shrink-0 snap-start scroll-ml-6 rounded-lg bg-purple-500"></div> <div class="h-24 w-40 shrink-0 snap-start scroll-ml-6 rounded-lg bg-cyan-500"></div> </div>
أهم القيم
| القيمة | الوظيفة |
|---|---|
| scroll-m-* | هامش تمرير على كل الجهات لعنصر محدّد |
| scroll-mt-* / scroll-mb-* | هامش تمرير علوي أو سفلي فقط |
| scroll-ms-* / scroll-me-* | هامش منطقي (يعمل صح تلقائيًّا مع RTL) |
| scroll-p-* | حشو تمرير على الحاوية نفسها |
💡 نصائح عملية
- لصفحة فيها شريط تنقّل sticky، ضع scroll-mt-{ارتفاع الشريط} على كل قسم مستهدف بروابط #anchor
- فضّل scroll-ms-/scroll-me- المنطقية على scroll-ml-/scroll-mr- في المواقع العربية لتعمل صح تلقائيًّا مع RTL
⚠️ أخطاء شائعة
- الخلط بين scroll-margin (على العنصر المستهدَف) وscroll-padding (على الحاوية) — الأولى الأشيع استخدامًا
- نسيان scroll-mt على أقسام الصفحة عند وجود شريط تنقّل ثابت — يظهر العنوان مخفيًّا جزئيًّا خلفه
خصائص ذات صلة
🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار TAILWIND الكامل بالعربي.
📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs