ScrollSpy component
How it works
Scrollspy is a component that automatically updates Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport. Scrollspy has a few requirements to function properly:
- It must be used on a Bootstrap nav component or list group.
- Scrollspy requires
position: relative;on the element you’re spying on, usually the<body>or<div class="content-inner">. - When spying on elements other than the
<body>, be sure to have aheightset andoverflow-y: scroll;applied. - Anchors (
<a>) are required and must point to an element with thatid.
.active class from one item to the next based on their
associated targets.
Example in navbar
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Markup example
<nav id="navbar-example2" class="navbar 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>
Example with nested nav
Scrollspy also works with nested .navs. If a nested
.nav is .active, its parents will also be
.active. Scroll the area next to the navbar and watch the
active class change.
Item 1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 1-1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 1-2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3-1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3-2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Markup example
<div class="row">
<div class="col-4">
<nav class="nav nav-pills flex-column" id="scrollspy_nest">
<a class="nav-link active" 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>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#scrollspy_nest" data-bs-offset="0" class="some-class" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p class="mb-3">...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p class="mb-3">...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p class="mb-3">...</p>
<h4 id="item-2">Item 2</h4>
<p class="mb-3">...</p>
<h4 id="item-3">Item 3</h4>
<p class="mb-3">...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p class="mb-3">...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
</div>
</div>
Example with list group
Scrollspy also works with .list-groups. Scroll the
area next to the list group and watch the active class change.
Item 1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 4
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Markup example
<div class="row">
<div class="col-4">
<div id="scrollspy_list_group" 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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#scrollspy_list_group" data-bs-offset="0" class="some-class" tabindex="0">
<h5 id="list-item-1">Item 1</h5>
<p class="mb-3">...</p>
<h5 id="list-item-2">Item 2</h5>
<p class="mb-3">...</p>
<h5 id="list-item-3">Item 3</h5>
<p class="mb-3">...</p>
<h5 id="list-item-4">Item 4</h5>
<p>...</p>
</div>
</div>
</div>
Usage via Data Attributes
To easily add scrollspy behavior to your topbar navigation,
add data-bs-spy="scroll" to the element you want to spy on
(most typically this would be the
data-bs-target attribute with the ID
or class of the parent element of any Bootstrap
.nav component.
Add CSS styles:
.content-wrapper {
position: relative;
}
And add markup:
<div class="content-inner" data-bs-spy="scroll" data-bs-target=".sidebar-component-right">
[...]
<div class="sidebar sidebar-component sidebar-component-right sidebar-sticky ...">
<div class="sidebar-content">
[...]
</div>
</div>
[...]
</div>
Usage via JavaScript
After adding position: relative; in your CSS, call the
scrollspy via JavaScript:
// Initialize
const scrollspyElement = document.querySelector('.content-inner');
const scrollSpy = new bootstrap.ScrollSpy(scrollspyElement, {
target: '.sidebar-component-right'
});
Scrollspy Methods
Scrollspy supports 4 methods: refresh - when using scrollspy in
conjunction with adding or removing of elements from the DOM, you'll need to
call the refresh method; dispose - destroys an element’s
scrollspy, getInstance - static method which allows you to get
the scrollspy instance associated with a DOM element,
getOrCreateInstance - Static method which allows you to get the
scrollspy instance associated with a DOM element, or create a new one in
case it wasn’t initialized.
// Refresh Scrollspy
const dataSpyList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'));
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh();
});
// Destroy Scrollspy
const dataSpyList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'));
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl).dispose();
});
// getInstance method
const scrollSpyContentEl = document.getElementById('content');
const scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl); // Returns a Bootstrap scrollspy instance
// getOrCreateInstance method
const scrollSpyContentEl = document.getElementById('content');
const scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl); // Returns a Bootstrap scrollspy instance
Scrollspy Options
Options can be passed via data attributes or JavaScript. For data attributes,
append the option name to data-, as in
data-offset="".
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | 10 | Pixels to offset from top when calculating position of scroll |
| method | string | auto | Finds which section the spied element is in.
auto will choose the best method to get scroll
coordinates. offset will use the
Element.getBoundingClientRect() method to get scroll
coordinates. position will use the
HTMLElement.offsetTop and HTMLElement.offsetLeft properties
to get scroll coordinates. |
| target | string | jQuery object | DOM element | Specifies element to apply Scrollspy plugin |
Scrollspy Events
| Event Type | Description |
|---|---|
activate.bs.scrollspy |
This event fires on the scroll element whenever a new item becomes activated by the scrollspy. |
Example code:
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]');
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
});
