تحديث الرصد وأحداث التمرير | تتبع التمرير Scrollspy في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

كثيراً ما تضيف التطبيقات التفاعلية فصولاً محمّلة كسولاً أو تحذف أقساماً من شجرة العناصر بعد تحميل الصفحة. متى أضفت أو حذفت قسماً ديناميكياً داخل منطقة الرصد، استدعِ الدالة bootstrap.ScrollSpy.getOrCreateInstance(scrollEl).refresh() ليعيد مراقب التقاطع فهرسة الأهداف الجديدة فوراً.

كما يمكنك الاستماع للحدث activate.bs.scrollspy على حاوية التمرير — حيث تشير الخاصية event.relatedTarget إلى الرابط الذي تنشط للتو — لتحديث شريط تقدم القراءة أو عنوان القسم الحالي.

السمة أو الدالة أو الحدث	موضع التطبيق	الوظيفة في Bootstrap 5.3
`data-bs-spy="scroll"`	حاوية التمرير أو `<body>`	تشغيل محرك رصد التقاطع لتتبع الأقسام
`data-bs-target="#navId"`	حاوية التمرير	ربط الحاوية بشريط `.nav` أو `.navbar` أو `.list-group`
`tabindex="0"`	حاويات التمرير الفرعية	تمكين التركيز والتمرير عبر لوحة المفاتيح
`data-bs-smooth-scroll="true"`	حاوية التمرير	تفعيل الانتقال الانسيابي عند النقر على الروابط
`data-bs-root-margin`	حاوية التمرير	ضبط حدود منطقة التفعيل مثل `0px 0px -40%`
`instance.refresh()`	كائن `bootstrap.ScrollSpy`	إعادة فهرسة الأقسام بعد تعديل عناصر DOM برمجياً
`activate.bs.scrollspy`	حاوية التمرير	حدث ينطلق كلما انتقلت حالة النشاط لرابط جديد

الصف 2 كود برمجي

HTML

<button id="addSecBtn" class="btn btn-sm btn-primary">
  Append Section &amp; Refresh Spy
</button>
<span id="spyStatus" class="ms-2 small text-muted">
  Active: #s1
</span>

جرّب بنفسك

الصف 3 ملاحظة هامة

الصف 4 ملاحظة هامة

الصف 5 ملاحظة هامة

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في هذا الدرس توظيف محرك Scrollspy الحديث في بوتستراب 5.3 مع أشرطة التنقل والفهارس المتداخلة ومجموعات القوائم، وضبط التمرير السلس وهامش الرصد، وتحديث المراقب برمجياً مع الأحداث الحية. الخطوة التالية: انتقل الآن إلى الوحدة التاسعة بدءاً بدرس «أوضاع الألوان والوضع الداكن في بوتستراب 5.3» لبناء واجهات تدعم الوضعين الفاتح والداكن والثيمات المخصصة باحترافية.

Refreshing Dynamic Scrollspy تحديث الرصد وأحداث التمرير

شرح صفوف ومحتوى الفقرة

ملخص الدرس

ماذا تعلّمت في هذا الدرس؟

جميع فقرات هذا الدرس (تتبع التمرير Scrollspy في بوتستراب 5)