تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

Scrollspy

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

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

كيف تعمل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

هذا هو بعض محتوى العنصر النائب لصفحة 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

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

البند 1-1

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

البند 1-2

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

البند 2

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

البند 3

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

البند 3-1

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

البند 3-2

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

<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

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

البند 2

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

البند 3

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

البند 4

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

<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...
})