scroll-snap-type وscroll-snap-align
أنشئ تجارب تمرير للدوارات والتنقل بين الصفحات باستخدام خصائص CSS للالتقاط أثناء التمرير
scroll-snap-type وscroll-snap-align درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هو CSS Scroll Snap؟
يتيح CSS Scroll Snap للحاويات القابلة للتمرير «الالتقاط» إلى مواضع محددة بعد التمرير، ما ينشئ سلوك التصفح على صفحات متتالية وسلوك الرف الدوّار من دون JavaScript.
scroll-snap-type على الحاوية
فعّل الالتقاط على الحاوية القابلة للتمرير:
<div class="carousel">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>قيم scroll-snap-type
يتكوّن من جزأين:
- المحور:
xأوyأوboth - درجة الإلزام:
mandatory(يلتقط دائمًا) أوproximity(يلتقط عند الاقتراب من نقطة التقاط)
<div class="paged">Paged container</div>
<div class="freeform">Freeform container</div>scroll-snap-align على العناصر
حدّد موضع التقاط كل عنصر ابن داخل الحاوية:
<div class="carousel-demo">
<div class="carousel-item">1</div><div class="carousel-item">2</div>
</div>التقاط صفحات بملء الشاشة
تخطيط لأقسام عمودية بملء الشاشة تتصفحها صفحةً تلو الأخرى:
<div class="sections">
<div class="section">Section 1</div><div class="section">Section 2</div>
</div>التقاط الرف الدوّار الأفقي
رف دوّار أفقي للبطاقات مع الالتقاط:
<div class="carousel">
<div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
</div>scroll-snap-stop
يمنع scroll-snap-stop: always التمرير السريع من تجاوز نقاط الالتقاط. ولا يستطيع المستخدم تجاوز أكثر من عنصر واحد في كل إيماءة تمرير.
<div class="slider">
<div class="slide">1</div><div class="slide">2</div>
</div>scroll-snap-margin وscroll-padding
أزِح موضع الالتقاط على العناصر (scroll-margin) أو على الحاوية (scroll-padding):
<div class="carousel">Carousel container</div>overscroll-behavior
يمنع overscroll-behavior: contain تسلسل التمرير — فعندما تصل الحاوية إلى حد التمرير، لا تستمر الصفحة في التمرير أيضًا:
<div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>اعتبارات إمكانية الوصول
ينبغي أن تظل الرفوف الدوّارة ذات الالتقاط قابلةً للتنقل باستخدام لوحة المفاتيح. يجب أن تنقل مفاتيح الأسهم بين نقاط الالتقاط. أضف أدوار وتسميات ARIA للرف الدوّار. وينبغي للتمرير البرمجي عبر JavaScript أن يراعي نقاط الالتقاط نفسها.
الرفوف الدوّارة باستخدام CSS مقارنةً بـ JS
يتولى CSS Scroll Snap معظم الاحتياجات الأساسية للرفوف الدوّارة من دون JavaScript، مثل الالتقاط، وإخفاء شريط التمرير، ومحاذاة المسافات الداخلية. استخدم مكتبة JS عندما تحتاج إلى مؤشرات نقطية، أو أزرار السابق/التالي مع انتقالات متحركة، أو إدارة معقدة لإمكانية الوصول.
تحقق سريع
أي قيمة من scroll-snap-type تضمن توقف الحاوية دائمًا عند نقطة التقاط تمامًا، وليس بينها؟
خلاصة
ينشئ CSS Scroll Snap سلوك التصفح على صفحات متتالية والرفوف الدوّارة. اضبط scroll-snap-type: x mandatory على الحاوية وscroll-snap-align: start على العناصر. استخدم scroll-snap-stop: always لمنع التجاوز. ادمجه مع overscroll-behavior: contain لمنع تسلسل التمرير. أخفِ أشرطة التمرير باستخدام scrollbar-width: none للحصول على مظهر أنظف.
الأسئلة الشائعة
هل درس «scroll-snap-type وscroll-snap-align» مجاني؟
نعم — نص درس «scroll-snap-type وscroll-snap-align» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «scroll-snap-type وscroll-snap-align»؟
أنشئ تجارب تمرير للدوارات والتنقل بين الصفحات باستخدام خصائص CSS للالتقاط أثناء التمرير تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «scroll-snap-type وscroll-snap-align»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- overflow: hidden وscroll وauto وclip
- scroll-behavior: smooth
- scroll-snap-type وscroll-snap-align
- تنسيق شريط التمرير باستخدام ::-webkit-scrollbar