خاصية نوع الالتقاط عند التمرير
آخر تحديث: 2026-09-13
scroll-snap-type خاصية نوع الالتقاط عند التمرير
تُفعّل خاصية scroll-snap-type تأثير الالتقاط أثناء التمرير، مما يجعل حاوية التمرير تُحاذي العناصر المحددة إلى حافتها أو مركزها عند التوقف. تُستخدم عادةً في المعارض وصفحات التمرير بملء الشاشة والقوائم الأفقية المنزلقة، مما يجعل تجربة التمرير أكثر دقة وتحكمًا.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ];⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | x | y | block | inline | both | mandatory | proximity | كلمة مفتاحية | نوع الالتقاط عند التمرير |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scroll-snap-type | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تعمل mandatory دائمًا بالالتقاط إلى أقرب نقطة التقاط؛ بينما تعمل proximity بالالتقاط فقط عندما يكون موضع التوقف قريبًا من نقطة التقاط — وهو سلوك أكثر مرونة.
تلميح： يجب دمجها مع scroll-snap-align على العناصر الفرعية لتحديد موضع محاذاة كل عنصر فرعي.
❓ الأسئلة الشائعة
Qهل تتعارض خاصيتا scroll-snap-type و scroll-behavior: smooth؟
Aلا — لكل منهما وظيفة مختلفة وكثيرًا ما تُستخدمان معًا. تحدد scroll-snap-type أين تتوقف: فالتمرير يلتقط إلى نقطة عند التوقف. وتحدد scroll-behavior كيف تصل إلى هناك: عبر حركة سلسة. عند ضبط كلتيهما، ينزلق التمرير أولًا ثم يلتقط بدقة — وهي المجموعة القياسية للمعارض والتمرير بملء الشاشة.
Qلماذا لا يعمل scroll-snap-type مع العناصر الفرعية؟
Aالسبب الأكثر شيوعًا هو غياب scroll-snap-align عن العناصر الفرعية، فلا توجد نقطة التقاط لالتقاطها؛ أو أن حجم الحاوية لا يتطابق مع العناصر الفرعية، فلا يوجد موضع التقاط متاح عند التوقف؛ أو أن المحتوى لا يفيض، فلا يمكن للحاوية التمرير أصلًا. تحقق من أن الحاوية تتمرر فعلًا وأن العناصر الفرعية تضبط scroll-snap-align: start/center/end.
Qما الفرق بين mandatory و proximity في scroll-snap-type؟
Aتعمل mandatory دائمًا بالالتقاط: عند توقف التمرير، تلتقط إلى أقرب نقطة حتى لو تحركت قليلًا فقط. أما proximity فتلتقط بمرونة: تلتقط فقط عندما يكون موضع التوقف قريبًا من نقطة التقاط، وإلا تتوقف بحرية. تمنح mandatory إحساسًا مستقرًا لكن قد يصعب التوقف عند محتوى وسطي؛ بينما تكون proximity أكثر طبيعية وتناسب الحاويات الكثيفة.
Qما مدى دعم المتصفحات لخاصية scroll-snap-type عبر الأجهزة؟
Aيدعمها كل من Chrome و Edge و Firefox و Safari على سطح المكتب، لكن Safari استخدم المواصفات القديمة لفترة طويلة، مما تطلب بادئة -webkit-scroll-snap-type مع بنية مختلفة. يدعم Chrome 69+ و Firefox 68+ المواصفات الجديدة. على الهاتف، يعمل iOS Safari 13+؛ ولإصدارات iOS الأقدم، انتبه لاختلافات البادئة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
