Перейти до основного вмісту Перейти до навігації документами
in English

Scrollspy

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

Як це працює

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

  • Його потрібно використовувати в навігаційному компоненті або групі списку Bootstrap .
  • Scrollspy вимагає position: relative;від елемента, який ви шпигуєте, як правило, <body>.
  • Якір ( <a>) є обов’язковим і має вказувати на елемент із цим id.

Після успішного впровадження ваша навігація або група списку оновлюватимуться відповідно, переміщуючи .activeклас від одного елемента до наступного на основі пов’язаних цілей.

Прокручувані контейнери та доступ з клавіатури

Якщо ви створюєте контейнер із можливістю прокручування (крім <body>), переконайтеся, що маєте heightнабір і overflow-y: scroll;застосовуєте до нього — поряд із a 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'
})

Потрібні цілі 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...
})