في هذا الدرس 5تصفّح المواضيع
تغدو قراءة المراجع التقنية المطولة وتوثيق الواجهات البرمجية أكثر وضوحاً عندما يضيء الفهرس الجانبي أو الشريط العلوي تلقائياً أمام القسم المعروض حالياً على الشاشة؛ وهذه بالضبط مهمة إضافة Scrollspy في بوتستراب.
أعاد بوتستراب في الإصدارين 5.2 و5.3 بناء محرك تتبع التمرير بالكامل بالاعتماد على واجهة المتصفح الأصيلة IntersectionObserver بدلاً من حسابات الإزاحة الرقمية القديمة. وقد أثمر هذا التحديث ميزتين جوهريتين: أداء فائق الخفة دون إبطاء التمرير، وإلغاء الحاجة لشرط position: relative القديم أو سمة الإزاحة الملغاة.
<nav id="apiNav" class="navbar bg-body-tertiary px-3 mb-2">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#sec-auth">Auth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sec-rate">Limits</a>
</li>
</ul>
</nav>توفر سمتان تصريحيتان تحكماً دقيقاً في تجربة التمرير وحساسية الرصد دون كتابة كود إضافي:
- التمرير السلس
data-bs-smooth-scroll="true"— ينقل القارئ بانسيابية بصرية ناعمة نحو القسم المقصود فور النقر على رابطه في الفهرس. - هامش منطقة الرصد
data-bs-root-margin="0px 0px -40%"— يُمرَّر مباشرةً لخيارrootMarginفي مراقب التقاطع؛ حيث يؤدي تقليص الحافة السفلية بنسبة-40%إلى تفعيل القسم عندما يدخل منطقة القراءة العلوية المريحة بدلاً من تفعيله بمجرد ظهور أول بكسل منه أسفل النافذة.
<div data-bs-spy="scroll" data-bs-target="#sideToc"
data-bs-root-margin="0px 0px -40%"
data-bs-smooth-scroll="true" tabindex="0">
<h4 id="item-1">1. Architecture</h4>
<h5 id="item-1-1">1.1 Edge Nodes</h5>
</div>كثيراً ما تضيف التطبيقات التفاعلية فصولاً محمّلة كسولاً أو تحذف أقساماً من شجرة العناصر بعد تحميل الصفحة. متى أضفت أو حذفت قسماً ديناميكياً داخل منطقة الرصد، استدعِ الدالة 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 | حاوية التمرير | حدث ينطلق كلما انتقلت حالة النشاط لرابط جديد |
<button id="addSecBtn" class="btn btn-sm btn-primary">
Append Section & Refresh Spy
</button>
<span id="spyStatus" class="ms-2 small text-muted">
Active: #s1
</span>ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس توظيف محرك Scrollspy الحديث في بوتستراب 5.3 مع أشرطة التنقل والفهارس المتداخلة ومجموعات القوائم، وضبط التمرير السلس وهامش الرصد، وتحديث المراقب برمجياً مع الأحداث الحية. الخطوة التالية: انتقل الآن إلى الوحدة التاسعة بدءاً بدرس «أوضاع الألوان والوضع الداكن في بوتستراب 5.3» لبناء واجهات تدعم الوضعين الفاتح والداكن والثيمات المخصصة باحترافية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Scrollspy تتبع التمرير التلقائي
- إضافة برمجية في بوتستراب تحدّث حالة النشاط على روابط التنقل تلقائياً تبعاً للقسم الظاهر أثناء التمرير.
- للمراجعة
- 02 IntersectionObserver مراقب تقاطع العناصر
- واجهة متصفح أصيلة غير متزامنة يعتمد عليها بوتستراب 5.2+ لرصد دخول وخروج الأقسام بكفاءة عالية.
- للمراجعة
- 03 Root Margin (data-bs-root-margin) هامش منطقة الرصد
- قيمة هامش تتحكم في نطاق النافذة الفعّال لالتقاط القسم النشط ومنع التفعيل المبكر أسفل الشاشة.
- للمراجعة
- 04 Hierarchical Activation التنشيط الهرمي المتداخل
- ميزة تلوين كلٍّ من الرابط الفرعي ورابط الباب الرئيسي الأب عند قراءة قسم فرعي متداخل.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 TOC فهرس المحتويات
- Table of Contents
- قائمة عناوين المستند الجانبية المتزامنة لحظياً مع موضع القراءة عبر Scrollspy.
- للمراجعة
- 02 SPA تطبيق الصفحة الواحدة
- Single-Page Application
- تطبيق تفاعلي تُستخدم فيه دالة refresh() لإعادة فهرسة الأقسام المضافة ديناميكياً دون إعادة تحميل.
- للمراجعة
- 03 FPS معدل الإطارات في الثانية
- Frames Per Second
- معيار سلاسة الحركة البصرية الذي يحافظ عليه مراقب التقاطع دون إرهاق خيط المعالجة الرئيسي.
- للمراجعة
- 04 CMS نظام إدارة المحتوى
- Content Management System
- منصة نشر تولّد معرّفات العناوين وروابط فهرس القراءة التلقائي للمقالات الطويلة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
صمّم تخطيطاً من عمودين يضم فهرس .nav.nav-pills متداخلاً ومنطقة محتوى قابلة للتمرير مزودة بسمات data-bs-spy="scroll" وdata-bs-smooth-scroll="true" وdata-bs-root-margin="0px 0px -40%" وtabindex="0".
-
اكتب معالج نقر يضيف عنواناً وفقرة ورابطاً مقابلاً في الفهرس ثم يستدعي bootstrap.ScrollSpy.getOrCreateInstance(el).refresh() ويعرض القسم النشط عبر حدث activate.bs.scrollspy.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.