Scrollspy

به طور خودکار ناوبری بوت استرپ یا اجزای گروه لیست را بر اساس موقعیت اسکرول به روز کنید تا مشخص کنید کدام پیوند در حال حاضر در نمای نمایش فعال است.

در این صفحه

چگونه کار می کند

Scrollspy برای عملکرد صحیح چند الزام دارد:

باید در یک جزء ناوبری بوت استرپ یا گروه لیست استفاده شود.
Scrollspy به position: relative;عنصری که در حال جاسوسی روی آن هستید، معمولاً نیاز <body>دارد.
لنگرها ( <a>) مورد نیاز هستند و باید به عنصری با آن اشاره idکنند.

هنگامی که با موفقیت پیاده سازی شد، گروه ناو یا لیست شما بر اساس آن به روز می شود و .activeکلاس را از یک آیتم به آیتم بعدی بر اساس اهداف مرتبط خود منتقل می کند.

ظروف قابل پیمایش و دسترسی به صفحه کلید

اگر یک محفظه قابل پیمایش می‌سازید (غیر از <body>)، حتماً یک heightمجموعه داشته باشید و overflow-y: scroll;روی آن اعمال کنید—در کنار a tabindex="0"برای اطمینان از دسترسی به صفحه‌کلید.

ناحیه زیر نوار ناوبری را اسکرول کنید و تغییر کلاس فعال را تماشا کنید. موارد کشویی نیز برجسته خواهند شد.

عنوان اول

این برخی از محتوای نگهدارنده مکان برای صفحه 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>

از طریق جاوا اسکریپت

پس از افزودن position: relative;CSS خود، scrollspy را از طریق جاوا اسکریپت فراخوانی کنید:

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

اهداف شناسایی قابل حل مورد نیاز است

پیوندهای نوار ناوبری باید دارای اهداف شناسایی قابل حل باشند. برای مثال، <a href="#home">home</a>باید با چیزی در DOM مطابقت داشته باشد مانند <div id="home"></div>.

عناصر هدف غیرقابل مشاهده نادیده گرفته شدند

عناصر هدف که قابل مشاهده نیستند نادیده گرفته می شوند و موارد ناوبری مربوطه آنها هرگز برجسته نمی شوند.

مواد و روش ها

تازه کردن

هنگام استفاده از scrollspy همراه با افزودن یا حذف عناصر از DOM، باید متد Refresh را به این صورت فراخوانی کنید:

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

در معرض قرار دادن

Scrollspy یک عنصر را از بین می برد. (داده های ذخیره شده در عنصر DOM را حذف می کند)

getInstance

روش ایستا که به شما امکان می دهد نمونه اسکرول اسپی مرتبط با یک عنصر DOM را دریافت کنید

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

getOrCreateInstance

روش ایستا که به شما امکان می دهد نمونه اسکرول اسپی مرتبط با یک عنصر DOM را دریافت کنید یا در صورتی که اولیه نشده بود نمونه جدیدی ایجاد کنید.

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

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-bs-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-bs-offset="".

نام	تایپ کنید	پیش فرض	شرح
`offset`	عدد	`10`	هنگام محاسبه موقعیت پیمایش، پیکسل‌هایی که باید از بالا جابجا شوند.
`method`	رشته	`auto`	پیدا می کند که عنصر جاسوسی در کدام بخش قرار دارد. `auto`بهترین روش را برای دریافت مختصات اسکرول انتخاب می کند. `offset`از `Element.getBoundingClientRect()`روش برای بدست آوردن مختصات اسکرول استفاده خواهد کرد. برای بدست آوردن مختصات اسکرول از ویژگی and `position`استفاده می کند.`HTMLElement.offsetTopHTMLElement.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

استفاده

از طریق ویژگی های داده

از طریق جاوا اسکریپت

اهداف شناسایی قابل حل مورد نیاز است

عناصر هدف غیرقابل مشاهده نادیده گرفته شدند

مواد و روش ها

تازه کردن

در معرض قرار دادن

getInstance

getOrCreateInstance

گزینه ها

مناسبت ها