snap-*
الالتقاط عند التمرير snap-*
يجعل التمرير يتوقّف ويلتقط عند نقاط محدّدة تلقائيًّا — أساس بناء carousel أو معرض صور بلا جافاسكربت.
scroll-snap ميزة CSS تتحكّم بسلوك التمرير داخل حاوية: بدل تمرير حرّ عشوائي، يلتقط التمرير عند عناصر محدّدة ويستقرّ عندها. يُضبط على مستويين: الحاوية تحصل على snap-x أو snap-y (اتجاه الالتقاط) مع snap-mandatory (التزام صارم بالالتقاط) أو snap-proximity (التقاط فقط إن اقترب المستخدم بما يكفي)، وكل عنصر ابن يحصل على snap-start أو snap-center أو snap-end ليحدّد نقطة التقاطه.
النتيجة سلوك carousel أو معرض صور أفقي كامل بلا سطر جافاسكربت واحد، ويعمل بشكل طبيعي مع لمس الجوّال (touch) لأنه ميزة متصفح أصيلة.
الصياغة
class="snap-x snap-mandatory overflow-x-scroll" /* الحاوية */ class="snap-center" /* كل عنصر ابن */
⚡ جرّب بنفسك
عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.
<script src="https://cdn.tailwindcss.com"></script> <div class="flex snap-x snap-mandatory gap-4 overflow-x-scroll p-4"> <div class="h-32 w-48 shrink-0 snap-center rounded-lg bg-purple-500"></div> <div class="h-32 w-48 shrink-0 snap-center rounded-lg bg-cyan-500"></div> <div class="h-32 w-48 shrink-0 snap-center rounded-lg bg-purple-500"></div> </div>
أهم القيم
| القيمة | الوظيفة |
|---|---|
| snap-x / snap-y / snap-both | اتجاه الالتقاط على الحاوية |
| snap-mandatory / snap-proximity | صرامة الالتقاط |
| snap-start / snap-center / snap-end | نقطة الالتقاط على كل عنصر ابن |
| snap-always / snap-normal | هل يجب المرور بنقطة الالتقاط أثناء التمرير السريع أم يمكن تخطّيها |
💡 نصائح عملية
- أضف shrink-0 على العناصر داخل flex حتى لا تتقلّص عن عرضها الأصلي
- snap-mandatory يعطي شعور carousel واضح، وsnap-proximity أنعم وأقل إلزامًا — جرّب الاثنين
⚠️ أخطاء شائعة
- نسيان overflow-x-scroll (أو overflow-x-auto) على الحاوية — بدونه لا تمرير أصلًا فلا معنى للالتقاط
- وضع snap-x على الحاوية دون أي snap-start/center/end على الأبناء — لا يحدث التقاط فعلي
خصائص ذات صلة
🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار TAILWIND الكامل بالعربي.
📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs