IntersectionObserver للتأثيرات المحفَّزة بالتمرير

تراقب API المسماة IntersectionObserver بكفاءة دخول عنصر واحد أو أكثر إلى إطار عرض المتصفح أو خروجها منه، أو دخولها إلى عنصر سلف محدد أو خروجها منه. وعلى خلاف مستمعي التمرير الذين يُستدعون عند كل بكسل، لا يستدعي المراقب دالة الاستدعاء إلا عندما يتجاوز العنصر عتبة معينة، مما يجعله أكثر كفاءة بكثير للتأثيرات المعتمدة على التمرير.

تتلقى دالة الاستدعاء مصفوفة من كائنات IntersectionObserverEntry، كائنًا واحدًا لكل عنصر تتم مراقبته. يحتوي كل إدخال على قيمة منطقية isIntersecting (تكون true عند الظهور)، ورقم intersectionRatio بين 0 و1 (نسبة الجزء الظاهر حاليًا من العنصر). استخدم هاتين القيمتين لتحديد حالة الظهور.

أنشئ observer داخل useEffect واستدعِ observer.observe(ref.current) لبدء مراقبة العنصر. يجب إرفاق ref بعنصر DOM الذي تريد تتبعه. أنشئ observer بعد تحميل المكوّن حتى تكون قيمة ref.current متاحة.

داخل دالة التنظيف في useEffect، استدعِ observer.unobserve(element) لإيقاف مراقبة عنصر محدد، أو observer.disconnect() لإيقاف جميع عمليات المراقبة. يؤدي نسيان التنظيف إلى استمرار observer بعد إزالة المكوّن، مما قد يسبب أخطاء أو تسرّبات في الذاكرة.

يتحكم خيار threshold في وقت استدعاء دالة الاستدعاء. تؤدي قيمة 0 إلى الاستدعاء فور ظهور أي بكسل من العنصر. ولا تؤدي قيمة 1 إلى الاستدعاء إلا عند ظهور العنصر بالكامل. ويمكنك أيضًا تمرير مصفوفة مثل [0, 0.5, 1] لتلقي عمليات استدعاء عند مستويات ظهور متعددة.

يوسّع rootMargin مساحة التقاطع الفعالة أو يقلّصها باستخدام صياغة شبيهة بـ CSS: تؤدي '100px 0px' إلى الاستدعاء قبل دخول العنصر إلى إطار العرض بمقدار 100 بكسل. استخدم '-100px' للاستدعاء فقط عندما يصبح العنصر داخل إطار العرض بمقدار 100 بكسل. يفيد ذلك في التحميل المسبق أو التحريك قبل ظهور العنصر بالكامل.

لتحميل الصور تحميلًا كسولًا، عيّن السمة data-src بدلًا من src في البداية. عندما يطلق المراقب إشعارًا مع isIntersecting: true، انسخ data-src إلى src لبدء طلب الشبكة. ثم استدعِ observer.unobserve(entry.target) لأن الصورة تحتاج إلى التحميل مرة واحدة فقط.

لإضافة رسوم متحركة للظهور التدريجي، أضف فئة CSS عندما تصبح قيمة isIntersecting صحيحة: element.classList.add('visible'). عرّف الانتقال في CSS: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } و.card.visible { opacity: 1; transform: none; }. يطلق المراقب هذا المشغّل بكفاءة.

يُعد IntersectionObserver مناسبًا جدًا لتتبع المشاهدة. عندما يصبح عنصر يضم السمة data-analytics-id متقاطعًا مع عتبة مقدارها 0.5، أطلق حدثًا تحليليًا. يقيس هذا بدقة أقسام المحتوى التي قرأها المستخدمون فعليًا، وهو أكثر موثوقية بكثير من النسبة المئوية البسيطة لعمق التمرير.

يمكن لمثيل واحد من IntersectionObserver مراقبة عناصر متعددة، وذلك باستدعاء observer.observe(element) لكل عنصر. تتشارك جميع العناصر المراقَبة في دالة الاستدعاء والخيارات نفسها. استخدم entry.target داخل دالة الاستدعاء لتحديد العنصر الذي أدى إلى إطلاق الإشعار.

يعيد الخطاف القابل لإعادة الاستخدام useInView القيمة [ref, inView]. أرفق ref بأي عنصر واقرأ inView لمعرفة ما إذا كان العنصر مرئيًا حاليًا. يقبل الخطاف كائن options لتحديد threshold وrootMargin. يجعل هذا التجريد تأثيرات التمرير تصريحية في أي مكوّن.

ماذا تعني عتبة IntersectionObserver التي تساوي 0؟

يتتبع IntersectionObserver مستوى ظهور العناصر بكفاءة باستخدام isIntersecting وintersectionRatio. احرص دائمًا على التنظيف باستخدام unobserve أو disconnect. استخدم threshold للتحكم في نقطة التشغيل، وrootMargin لتوسيع منطقة الكشف. طبّقه في التحميل الكسول والرسوم المتحركة وتتبع التحليلات.