نسبة IntersectionObserver: مساحة أي مستطيل تدخل الحساب؟

الخلاصة السريعة

• A وB وC سجلت 1 ثم 0.5 ثم 0.25.
• مساحة الهدف في حالاتنا كلها 10000 بكسل مربع.
• القص الداخلي D أعطى نصف المساحة، رغم ثبات الحاوية.
• الغطاء الأسود E لم يخفض القراءة عن 1.

إعداد يمكن رسمه على ورقة

اخترنا حاوية root بعرض وارتفاع 200 بكسل، وهدفًا target أبعاده 100 × 100. أزلنا الهوامش والحشو والحدود، وثبتنا اتجاه الاختبار من اليسار إلى اليمين. كانت الحاوية position:relative مع overflow:hidden، والهدف position:absolute؛ الأرقام التالية مواضع داخل هذا الإعداد.

في A وضعنا الزاوية العليا اليسرى للهدف عند (50,50). وفي B نقلناها إلى (150,50)، ثم إلى (150,150) في C. لم نكبر الهدف أو نصغره. رسمنا المستطيل كاملًا بخط متقطع خارج الحاوية في الشكل، حتى يظهر الفرق بين حجمه والجزء الذي بقي داخلها.

شغلنا الحالات في Edge 155.0.4283.45. أنشأنا مراقبًا جديدًا لكل حالة، وأخذنا أول سجل ثم فصلناه. ثبتنا rootMargin عند صفر والعتبات عند 0 و0.25 و0.5 و1؛ لم نسجل تمريرًا متتابعًا أو عدد إشعارات في الثانية.

اقرأ حالة B في المتصفح

ضع المثال في ملف HTML فارغ وافتحه؛ النتيجة في وحدة التحكم. [1] [2]

هذه حالة B وحدها. سجل تشغيل الشيفرة 0.5. قارناها بقياس منفصل لمستطيلي الهدف والتقاطع في الاختبار الكامل: الأول 100 × 100، والثاني 50 × 100. لم نأخذ مساحة الزر أو الصفحة أو الشاشة في هذه المقارنة.

<style>
body { margin:0; }
#root {
  position:relative;
  width:200px; height:200px;
  overflow:hidden;
}
#target {
  position:absolute;
  left:150px; top:50px;
  width:100px; height:100px;
  background:red;
}
</style>
<div id="root">
  <div id="target"></div>
</div>
<script>
const root = document.querySelector("#root");
const target = document.querySelector("#target");
const observer = new IntersectionObserver(
  ([entry]) => {
    console.log(entry.intersectionRatio);
    observer.disconnect();
  },
  {root, rootMargin:"0px",
   threshold:[0,.25,.5,1]}
);
observer.observe(target);
</script>

[1] [2]

راجع الأبعاد ثم اختر المقام

في B: 5000 ÷ 10000 = 0.5. أما 5000 ÷ 40000 = 0.125 فتستخدم مساحة الحاوية؛ لذلك لا تطابق النسبة المطلوبة. وفي C: 2500 ÷ 10000 = 0.25. [1]

يظهر الجدول الأبعاد التي أعادها سجل المتصفح. قارن A وB أولًا: الارتفاع بقي 100، والعرض المتقاطع نقص إلى 50. ثم قارن B وC: العرض بقي 50، والارتفاع نقص إلى 50. بقيت أبعاد الهدف الأصلية متساوية في الصفوف الثلاثة.

راجعنا النتائج بحساب كسور مستقل من الأبعاد، فاتفقت مع القراءات. لم نكتف بتحويل النسبة إلى علامة مئوية؛ احتفظنا بالبسط والمقام كي نستطيع اكتشاف تبديل أحدهما. هذه أبعاد اختبارنا المحدد، ولا نفترضها لكل عنصر يراقبه المتصفح.

القص والغطاء حالتان مختلفتان

في D أضفنا أبًا داخليًا للهدف بعرض 50 وارتفاع 200، مع position:relative وoverflow:hidden. وضعنا الهدف عند (0,0) داخله. بقيت الحاوية الخارجية 200 × 200، لكن السجل أعاد تقاطعًا 50 × 100 ونسبة 0.5. ضاق الجزء المتقاطع من جهة الأب الداخلي.

في E رجعنا إلى موضع A، وأضفنا بعد الهدف غطاءً أسود مطلق الموضع يملأ الحاوية بـinset:0. حجب المستطيل الأحمر في لقطة الاختبار، ومع ذلك بقي مستطيل التقاطع 100 × 100 والنسبة 1. قارنا اللون الفعلي بقراءة السجل، فلم نعامل الرقم وحده كشهادة مشاهدة.

يدخل القص حساب التقاطع؛ والإعداد الافتراضي لا يفحص التغطية بعنصر آخر. [2]

سجل هذه الخانات عند إعادة التجربة

اكتب اسم الحالة، وأبعاد الهدف، وأبعاد التقاطع، ثم النسبة. في سجلنا احتاج D إلى وصف الأب الداخلي، واحتاج E إلى وصف الغطاء الأسود؛ لو حذفنا هذين الوصفين لصار اختلاف القراءتين محيرًا رغم ثبات أبعاد الحاوية الخارجية.

لم نفعل trackVisibility، ولم نجرب هدفًا صفري المساحة أو تماس الحواف وحده. كما لم نجر قياسًا لزمن مشاهدة أو انتباه قارئ. المقارنة المكتملة هنا خمس لقطات هندسية ثابتة، مع صورة فعلية للغطاء، تكفي لفحص السؤال المحدد عن المساحة التي دخلت حسابنا.

المراجع

1. MDN — intersectionRatio
   https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/intersectionRatio
2. MDN — Intersection Observer API
   https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API