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

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

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

تغدو قراءة المراجع التقنية المطولة وتوثيق الواجهات البرمجية أكثر وضوحاً عندما يضيء الفهرس الجانبي أو الشريط العلوي تلقائياً أمام القسم المعروض حالياً على الشاشة؛ وهذه بالضبط مهمة إضافة Scrollspy في بوتستراب.

أعاد بوتستراب في الإصدارين 5.2 و5.3 بناء محرك تتبع التمرير بالكامل بالاعتماد على واجهة المتصفح الأصيلة IntersectionObserver بدلاً من حسابات الإزاحة الرقمية القديمة. وقد أثمر هذا التحديث ميزتين جوهريتين: أداء فائق الخفة دون إبطاء التمرير، وإلغاء الحاجة لشرط position: relative القديم أو سمة الإزاحة الملغاة.

الصف 2 صورة توضيحية

مخطط آلية عمل تتبع التمرير عبر IntersectionObserver في بوتستراب 5.3 وربطه بشريط الروابط وهامش الرصد

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

HTML

<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>

جرّب بنفسك

Scrollspy Observer Engine آلية رصد التمرير الحديثة

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

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