الجدول الكامل
| النمط | بيعمل إيه | الأداة | JS؟ | مناسب لـ |
|---|---|---|---|---|
| Sticky | Header يثبت ويسلّم | position: sticky | لأ | عناوين الأقسام، جداول، sidebars |
| Scroll snap | لوحات تقف مكانها | scroll-snap-* | لأ | carousels، stories، onboarding |
| Scroll triggered | يظهر لما يدخل | IntersectionObserver | أيوه | landing pages، كروت، أرقام |
| Infinite scroll | يجيب أكتر قرب الآخر | IntersectionObserver | أيوه | feeds، نتايج بحث |
| Scroll driven | قيمة ماشية مع الـ scroll | scroll() timeline | لأ | progress bar، header بيصغر |
| Zoom on scroll | صورة تكبر وهي بتعدّي | view() timeline | لأ | صور مميزة في مقالة |
| Parallax | طبقات بسرعات مختلفة | scroll() timeline | لأ | hero section |
| Horizontal scroll | رأسي ← حركة بالعرض | sticky + view-timeline | لأ | عرض مراحل أو منتجات |
| Scrollytelling | مشهد ثابت، خطوات بتغيّره | sticky + IntersectionObserver | أيوه | قصص وتقارير تفاعلية |
- عايز إيه؟ ← يثبت أو يقف: شكل
- عايز إيه؟ ← يحصل مرة: حدث
- عايز إيه؟ ← يمشي مع الـ scroll: تقدّم
- يحصل مرة ← قصة بمشهد ثابت: + sticky
راجع قبل ما تسلّم
⚡ الأداء
حرّك transform و opacity بس. مفيش شغل تقيل في scroll event. استخدم { passive: true } لو مضطر تسمع للـ scroll. وجرّب على موبايل ضعيف من DevTools ← Performance ← CPU throttling.
♿ الوصول
prefers-reduced-motion بيوقف الحركة. الـ scroller بيتحرك بالكيبورد (tabindex="0" لو container). المحتوى يبان من غير JS. ومحدش يخطف الـ scroll أو يغيّر سرعته.
الصفحة بتقطّع مع الـ scrollشيل الـ scroll listener، واستخدم IntersectionObserver أو scroll timeline، وحرّك transform بس
sticky مش ثابتأب عليه overflow، أو ناقص top
snap مانع يوصل لآخر لوحة طويلةproximity بدل mandatory
المحتوى فاضي لما الـ JS يتأخرالكلاس اللي بيخفي يتضاف بالـ JS
الـ footer مش باينزرار حمّل أكتر بدل infinite
Firefox مش بيحرّك@supports + حالة نهائية ثابتة، أو polyfill
ناس بتدوخprefers-reduced-motion: reduce يوقف parallax و zoom
الـ scroller مش بيتحرك بالكيبوردtabindex=0 و role=region و aria-label
خلّصت الفصل لما
🧠 اختبر نفسك
١) header بيصغر كل ما تنزل. أنهي نمط وأداة؟
scroll driven بـ
scroll() timeline على الـ header.٢) أرقام بتعد لما قسم الإحصائيات يظهر. أنهي؟
scroll triggered بـ IntersectionObserver، وبعدين العد بـ JS أو animation.