Scrollspy

Автоматично оновлюйте навігацію Bootstrap або компоненти групи списків на основі позиції прокручування, щоб вказати, яке посилання зараз активне у вікні перегляду.

На цій сторінці

Як це працює

Scrollspy має кілька вимог для належної роботи:

Його потрібно використовувати в навігаційному компоненті або групі списку Bootstrap .
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>

Через JavaScript

Після додавання position: relative;вашого CSS викличте scrollspy через JavaScript:

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

Потрібні цілі ID, які можна розв’язати

Посилання на навігаційній панелі повинні мати ідентифікатори, які можна розпізнати. Наприклад, a <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

Статичний метод, який дозволяє отримати екземпляр 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`	Ця подія спрацьовує на елементі scroll кожного разу, коли новий елемент активується 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

Потрібні цілі ID, які можна розв’язати

Невидимі цільові елементи ігноруються

методи

оновити

розпоряджатися

getInstance

getOrCreateInstance

Опції

Події