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 також працює з вкладеними .nav
s. Якщо вкладений .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-group
s. Прокрутіть область поруч із групою списку та спостерігайте за зміною активного класу.
Пункт 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...
})