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>
Използване
Чрез атрибути на данни
За да добавите лесно scrollspy поведение към вашата навигация в горната лента, добавете 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'
})
Необходими са разрешими ИД цели
Връзките на лентата за навигация трябва да имат разрешими целеви идентификатори. Например, <a href="#home">home</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()
})
изхвърлям
Унищожава 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 |
Това събитие се задейства върху елемента за превъртане всеки път, когато нов елемент се активира от scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})