Scrollspy

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

على هذه الصفحة

كيف تعمل

يحتوي Scrollspy على بعض المتطلبات للعمل بشكل صحيح:

يجب استخدامه في مجموعة قائمة أو مكون تنقل Bootstrap .
يتطلب Scrollspy position: relative;على العنصر الذي تتجسس عليه ، وعادةً ما يكون ملف <body>.
المراسي ( <a>) مطلوبة ويجب أن تشير إلى عنصر بذلك id.

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

حاويات قابلة للتمرير والوصول إلى لوحة المفاتيح

إذا كنت تقوم بإنشاء حاوية قابلة للتمرير (بخلاف <body>) ، فتأكد من وجود heightمجموعة overflow-y: scroll;وتطبيقها عليها - جنبًا إلى جنب tabindex="0"لضمان الوصول إلى لوحة المفاتيح.

قم بالتمرير في المنطقة أسفل شريط التنقل وشاهد تغيير الفصل النشط. سيتم تمييز عناصر القائمة المنسدلة أيضًا.

العنوان الأول

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

العنوان الثاني

العنوان الثالث

هذا هو بعض محتوى العنصر النائب لصفحة scrollspy. لاحظ أنه أثناء التمرير لأسفل الصفحة ، يتم تمييز ارتباط التنقل المناسب. يتم تكرارها في المثال المكون. نستمر في إضافة بعض الأمثلة الأ��رى هنا للتأكيد على التمرير والتمييز.

العنوان الرابع

العنوان الخامس

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

مثال مع التنقل المتداخل

يعمل Scrollspy أيضًا مع ملفات .navs المتداخلة. إذا كانت متداخلة .nav، .activeفسيكون والداها أيضًا .active. قم بالتمرير في المنطقة المجاورة لشريط التنقل وشاهد تغيير الفصل النشط.

البند 1

البند 1-1

البند 1-2

البند 2

البند 3

البند 3-1

البند 3-2

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

مثال مع قائمة المجموعة

يعمل Scrollspy أيضًا مع .list-groups. قم بالتمرير في المنطقة المجاورة لمجموعة القائمة وشاهد تغيير الفصل النشط.

البند 1 البند 2 البند 3 البند 4

البند 1

البند 2

البند 3

البند 4

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

إستعمال

عبر سمات البيانات

لإضافة سلوك التمرير بسهولة إلى شريط التنقل العلوي ، أضف data-bs-spy="scroll"إلى العنصر الذي تريد التجسس عليه (عادةً ما يكون هذا هو <body>). ثم أضف data-bs-targetالسمة بمعرف أو فئة العنصر الأصل لأي .navمكون Bootstrap.

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

عبر JavaScript

بعد الإضافة position: relative;في CSS الخاص بك ، قم باستدعاء scrollspy عبر JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

مطلوب تحديد أهداف معرّف قابل للحل

يجب أن تحتوي روابط Navbar على أهداف معرف قابلة للحل. على سبيل المثال ، <a href="#home">home</a>يجب أن يتوافق a مع شيء ما في DOM مثل <div id="home"></div>.

تم تجاهل عناصر الهدف غير المرئية

سيتم تجاهل العناصر المستهدفة غير المرئية ولن يتم تحديد عناصر التنقل المقابلة لها.

طُرق

تحديث

عند استخدام scrollspy مع إضافة عناصر أو إزالتها من DOM ، ستحتاج إلى استدعاء طريقة التحديث كما يلي:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

تخلص

يدمر التمرير لعنصر. (يزيل البيانات المخزنة على عنصر DOM)

getInstance

طريقة ثابتة تتيح لك الحصول على مثيل scrollspy المرتبط بعنصر DOM

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

طريقة ثابتة تتيح لك الحصول على مثيل scrollspy المرتبط بعنصر DOM ، أو إنشاء مثيل جديد في حالة عدم تهيئته

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-bs-، كما في data-bs-offset="".

اسم	يكتب	تقصير	وصف
`offset`	رقم	`10`	بكسل للإزاحة من الأعلى عند حساب موضع التمرير.
`method`	سلسلة	`auto`	البحث عن القسم الذي يوجد فيه العنصر التجسس. `auto`سيختار أفضل طريقة للحصول على إحداثيات التمرير. `offset`سيستخدم `Element.getBoundingClientRect()`الطريقة للحصول على إحداثيات التمرير. `position`سيستخدم الخصائص `HTMLElement.offsetTop`و `HTMLElement.offsetLeft`للحصول على إحداثيات التمرير.
`target`	سلسلة \| كائن jQuery \| عنصر DOM		يحدد عنصرًا لتطبيق البرنامج المساعد Scrollspy.

الأحداث

نوع الحدث	وصف
`activate.bs.scrollspy`	يتم تشغيل هذا الحدث على عنصر التمرير عندما يتم تنشيط عنصر جديد بواسطة scrollspy.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

كيف تعمل

حاويات قابلة للتمرير والوصول إلى لوحة المفاتيح

المثال في نافبار

العنوان الأول

العنوان الثاني

العنوان الثالث

العنوان الرابع

العنوان الخامس

مثال مع التنقل المتداخل

البند 1

البند 1-1

البند 1-2

البند 2

البند 3

البند 3-1

البند 3-2

مثال مع قائمة المجموعة

البند 1

البند 2

البند 3

البند 4

إستعمال

عبر سمات البيانات

عبر JavaScript

مطلوب تحديد أهداف معرّف قابل للحل

تم تجاهل عناصر الهدف غير المرئية

طُرق

تحديث

تخلص

getInstance

getOrCreateInstance

خيارات

الأحداث