IntersectionObserver API والعتبات
إنشاء مراقبين وتهيئة عتبات الظهور
IntersectionObserver API والعتبات درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
ما الذي يفعله IntersectionObserver
يستدعي IntersectionObserver دوال callback عندما يدخل عنصر إلى إطار العرض أو يخرج منه (أو من حاوية تمرير أخرى). وهو البديل الحديث عالي الأداء لمستمعي التمرير؛ إذ يتولى المتصفح إجراء الحسابات، ولا تعمل شيفرتك إلا عند حدوث تغيّرات فعلية في الظهور.
الإنشاء
ينشئ new IntersectionObserver(callback, options) مراقبًا. وتستقبل دالة callback مصفوفة من الإدخالات عند تغيّر حالات التقاطع؛ وتتحكم الخيارات في الحاوية التي تجري مراقبتها وفي قيم العتبات.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
console.log("Visible:", entry.target);
}
}
});
observer.observe(document.querySelector(".hero"));الكائن IntersectionObserverEntry
يحتوي كل إدخال على target (العنصر الخاضع للمراقبة)، وisIntersecting (قيمة منطقية)، وintersectionRatio (من 0 إلى 1)، وboundingClientRect، وintersectionRect، وtime. استخدم isIntersecting للتحقق الثنائي من الظهور، وintersectionRatio للمنطق الذي يعتمد على النسبة المئوية للجزء الظاهر.
الخيار threshold
يستدعي { threshold: 0.5 } دالة callback كلما تجاوزت نسبة التقاطع 50% صعودًا أو هبوطًا. استخدم مصفوفة [0, 0.25, 0.5, 0.75, 1] للاستدعاء عند كل ربع؛ فهذا مفيد لإنشاء مؤشرات التقدم أو التحليلات التي تسجل «النسبة الظاهرة».
الخيار root
يقيس المراقب افتراضيًا التقاطع مع إطار العرض. اضبط root: someScrollableDiv لقياسه بالنسبة إلى حاوية تمرير داخلية، مثل قائمة افتراضية داخل div ذي ارتفاع ثابت.
الخيار rootMargin
يوسّع rootMargin: "200px" نطاق المراقبة بمقدار 200 بكسل من كل جانب. استخدمه للاستدعاء مبكرًا (لبدء تحميل الصور قبل دخولها إطار العرض بمقدار 200 بكسل) أو متأخرًا (بحيث لا يحدث الاستدعاء إلا بعد تجاوز العنصر إطار العرض بالكامل).
new IntersectionObserver(callback, {
rootMargin: "0px 0px 200px 0px",
threshold: 0
});observe وunobserve
يبدأ observer.observe(element) مراقبة عنصر، بينما يوقف observer.unobserve(element) هذه المراقبة. أوقف المراقبة دائمًا عندما لا تعود بحاجة إلى callback (مثلًا بعد تشغيل التحميل الكسول مرة واحدة) لتحرير الذاكرة.
disconnect
يوقف observer.disconnect() مراقبة جميع العناصر التي تجري مراقبتها. استدعِه عند إزالة المكوّن أو عند عدم الحاجة إلى المراقب؛ فهذا يمنع التسريبات الناتجة عن استمرار المراقبين بعد انتهاء الغرض منهم.
التسليم غير المتزامن
تُسلَّم دوال callback بشكل غير متزامن وعلى دفعات؛ فعند حدوث تغيّرات كثيرة في التقاطع أثناء تمرير سريع، يحدث استدعاء واحد يحتوي على جميع الإدخالات، لا استدعاء واحد لكل عنصر. وهذا مكسب كبير في الأداء مقارنةً بمستمعي التمرير الذين يعملون عند كل حدث تمرير.
يُستدعى callback الأولي فورًا
عند بدء مراقبة عنصر جديد، تُستدعى دالة callback مرة واحدة بعد ذلك بوقت قصير جدًا مع الحالة الحالية. وهذا مفيد للتعامل مع العناصر الظاهرة أصلًا عند بدء المراقبة، من دون الحاجة إلى مسار تهيئة خاص.
حالات الاستخدام الشائعة
تشمل حالات الاستخدام تحميل الصور كسولًا، وتشغيل الرسوم المتحركة عند ظهور العناصر أثناء التمرير، والتمرير اللانهائي (بمراقبة sentinel قرب نهاية القائمة)، وتتبع المقالات التي قرأها المستخدم فعليًا، وتبديل حالة الرأس الثابت استنادًا إلى ظهور القسم الرئيسي.
اختبار المعرفة
ما الفرق بين threshold: 0 وthreshold: 1 في IntersectionObserver؟
الملخص
يستدعي IntersectionObserver دوال callback عند تغيّر ظهور العناصر، مع توفير الأداء والمعالجة على دفعات؛ لذا استبدل مستمعي التمرير به في منطق الظهور. اضبطه باستخدام threshold (من 0 إلى 1 أو مصفوفة)، وroot (حاوية تمرير مخصصة)، وrootMargin (لتوسيع نطاق المراقبة أو تقليصه). استخدم observe وunobserve لعناصر محددة، ويزيل disconnect كل شيء عند التنظيف.
الأسئلة الشائعة
هل درس «IntersectionObserver API والعتبات» مجاني؟
نعم — نص درس «IntersectionObserver API والعتبات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «IntersectionObserver API والعتبات»؟
إنشاء مراقبين وتهيئة عتبات الظهور تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «IntersectionObserver API والعتبات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- IntersectionObserver API والعتبات
- التحميل الكسول باستخدام IntersectionObserver
- تنفيذ التمرير اللانهائي
- إعداد الرسوم المتحركة المرتبطة بالتمرير