ربط تتبع التمرير بشريط التنقل | تتبع التمرير Scrollspy في بوتستراب 5

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

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

يتطلب ربط حاوية قابلة للتمرير — أو جسم الصفحة الكامل <body> — بشريط تنقل ثلاث قواعد دقيقة لا غنى عنها:

منح عنصر التنقل الهدف معرّفاً فريداً مثل id="apiNav"، ووضع السمتين data-bs-spy="scroll" وdata-bs-target="#apiNav" على حاوية المحتوى المرصودة.
مطابقة كل رابط تنقل href="#sec-id" مع عنصر عنوان يحمل نفس id="sec-id" داخل منطقة التمرير، بما في ذلك الروابط داخل القوائم المنسدلة .dropdown-item.
إضافة السمة tabindex="0" على أي حاوية تمرير فرعية غير <body> لتمكين مستخدم لوحة المفاتيح من التركيز بداخلها وتمريرها بمفاتيح الأسهم.

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

HTML

<div data-bs-spy="scroll" data-bs-target="#apiNav"
  data-bs-smooth-scroll="true" tabindex="0"
  class="p-3 border rounded"
  style="height: 180px; overflow-y: auto;">
  <h4 id="sec-auth">Authentication</h4>
  <p>Bearer token details...</p>
  <h4 id="sec-rate">Rate Limits</h4>
  <p>120 requests per minute...</p>
</div>

جرّب بنفسك

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

Navbar Scrollspy Setup ربط تتبع التمرير بشريط التنقل

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

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