Scribd
Upload
41 views10 pages

Scrollspy Bootstrap v5.3

Uploaded by

marufbl360
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views10 pages

Scrollspy Bootstrap v5.3

Uploaded by

marufbl360
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

12/3/24, 7:19 AM Scrollspy · Bootstrap v5.

View on GitHub

Scrollspy
Automatically update Bootstrap navigation or list group components
based on scroll position to indicate which link is currently active in the
viewport.

On this page

How it works
Scrollspy toggles the .active class on anchor (<a>) elements when the element with the id
referenced by the anchor’s href is scrolled into view. Scrollspy is best used in conjunction with a
Bootstrap nav component or list group, but it will also work with any anchor elements in the
current page. Here’s how it works.

To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a
scrollable container. The scrollable container can be the <body> or a custom element with a
set height and overflow-y: scroll.

On the scrollable container, add data-bs-spy="scroll" and data-bs-target="#navId" where


navId is the unique id of the associated navigation. If there is no focusable element inside the
element, be sure to also include a tabindex="0" to ensure keyboard access.

As you scroll the “spied” container, an .active class is added and removed from anchor links
within the associated navigation. Links must have resolvable id targets, otherwise they’re
ignored. For example, a <a href="#home">home</a> must correspond to something in the
DOM like <div id="home"></div>

Target elements that are not visible will be ignored. See the Non-visible elements section
below.

Examples
https://getbootstrap.com/docs/5.3/components/scrollspy/ 1/10
12/3/24, 7:19 AM Scrollspy · Bootstrap v5.3

Navbar
Scroll the area below the navbar and watch the active class change. Open the dropdown menu
and watch the dropdown items be highlighted as well.

Navbar First Second Dropdown

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

<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-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"
<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-root-margin="0px 0px -
<h4 id="scrollspyHeading1">First heading</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>...</p>
https://getbootstrap.com/docs/5.3/components/scrollspy/ 2/10
12/3/24, 7:19 AM Scrollspy · Bootstrap v5.3

<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>

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 Item 1
This is some placeholder content for the scrollspy page. Note
Item 1-1 that as you scroll down the page, the appropriate navigation
link is highlighted. It's repeated throughout the component
Item 1-2 example. We keep adding some more example copy here to
emphasize the scrolling and highlighting.
Item 2
Keep in mind that the JavaScript plugin tries to pick the right
Item 3
element among all that may be visible. Multiple visible
scrollspy targets at the same time may cause some issues.
Item 3-1

Item 1-1
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

<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end
<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>

https://getbootstrap.com/docs/5.3/components/scrollspy/ 3/10
12/3/24, 7:19 AM Scrollspy · Bootstrap v5.3

<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>

<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="tru
<div id="item-1">
<h4>Item 1</h4>
<p>...</p>
</div>
<div id="item-1-1">
<h5>Item 1-1</h5>
<p>...</p>
</div>
<div id="item-1-2">
<h5>Item 1-2</h5>
<p>...</p>
</div>
<div id="item-2">
<h4>Item 2</h4>
<p>...</p>
</div>
<div id="item-3">
<h4>Item 3</h4>
<p>...</p>
</div>
<div id="item-3-1">
<h5>Item 3-1</h5>
<p>...</p>
</div>
<div id="item-3-2">
<h5>Item 3-2</h5>
<p>...</p>
</div>
</div>
</div>
</div>

List group

https://getbootstrap.com/docs/5.3/components/scrollspy/ 4/10
12/3/24, 7:19 AM Scrollspy · Bootstrap v5.3

Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active
class change.

Item 1 Item 1
Item 2 This is some placeholder content for the scrollspy page. Note
that as you scroll down the page, the appropriate navigation
Item 3 link is highlighted. It's repeated throughout the component
example. We keep adding some more example copy here to
Item 4 emphasize the scrolling and highlighting.

Item 2

<div class="row">
<div class="col-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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true"
<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>
</div>
</div>

Simple anchors
Scrollspy is not limited to nav components and list groups, so it will work on any <a> anchor
elements in the current document. Scroll the area and watch the .active class change.
https://getbootstrap.com/docs/5.3/components/scrollspy/ 5/10
12/3/24, 7:19 AM Scrollspy · Bootstrap v5.3

Item 1 Item 1
Item 2 This is some placeholder content for the scrollspy page. Note
that as you scroll down the page, the appropriate navigation
Item 3 link is highlighted. It's repeated throughout the component
example. We keep adding some more example copy here to
Item 4
emphasize the scrolling and highlighting.
Item 5
Item 2

<div class="row">
<div class="col-4">
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scro
<a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
<a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
<a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
<a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
<a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" dat
<h4 id="simple-list-item-1">Item 1</h4>
<p>...</p>
<h4 id="simple-list-item-2">Item 2</h4>
<p>...</p>
<h4 id="simple-list-item-3">Item 3</h4>
<p>...</p>
<h4 id="simple-list-item-4">Item 4</h4>
<p>...</p>
<h4 id="simple-list-item-5">Item 5</h4>
<p>...</p>
</div>
</div>
</div>

Non-visible elements

https://getbootstrap.com/docs/5.3/components/scrollspy/ 6/10
12/3/24, 7:19 AM Scrollspy · Bootstrap v5.3

Target elements that aren’t visible will be ignored and their corresponding nav items won’t receive
an .active class. Scrollspy instances initialized in a non-visible wrapper will ignore all target
elements. Use the refresh method to check for observable elements once the wrapper becomes
visible.

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
el.addEventListener('shown.bs.tab', () => {
const target = el.getAttribute('data-bs-target')
const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
})
})

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 <body>). Then add the data-bs-
target attribute with the id or class name of the parent element of any Bootstrap .nav
component.

<body data-bs-spy="scroll" data-bs-target="#navbar-example">


...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>

Via JavaScript

const scrollSpy = new bootstrap.ScrollSpy(document.body, {


target: '#navbar-example'

https://getbootstrap.com/docs/5.3/components/scrollspy/ 7/10
12/3/24, 7:19 AM Scrollspy · Bootstrap v5.3

})

Options
As options can be passed via data attributes or JavaScript, you can append an option name to
data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option
name from “camelCase” to “kebab-case” when passing the options via data attributes. For
example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-
config that can house simple component configuration as a JSON string. When an element has
data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title
value will be 456 and the separate data attributes will override values given on data-bs-config. In
addition, existing data attributes are able to house JSON values like data-bs-
delay='{"show":0,"hide":150}'.

The final configuration object is the merged result of data-bs-config, data-bs-, and js object
where the latest given key-value overrides the others.

Name Type Default Description

rootMargin string 0px 0px Intersection Observer rootMargin valid units, when
-25% calculating scroll position.

smoothScroll boolean false Enables smooth scrolling when a user clicks on a link
that refers to ScrollSpy observables.

target string, DOM null Specifies element to apply Scrollspy plugin.


element

threshold array [0.1, 0.5, IntersectionObserver threshold valid input, when


1] calculating scroll position.

Deprecated Options

Up until v5.1.3 we were using offset & method options, which are now deprecated and
replaced by rootMargin. To keep backwards compatibility, we will continue to parse a given
offset to rootMargin, but this feature will be removed in v6.

https://getbootstrap.com/docs/5.3/components/scrollspy/ 8/10
12/3/24, 7:19 AM Scrollspy · Bootstrap v5.3

Methods
Method Description

dispose Destroys an element’s scrollspy. (Removes stored data on the DOM element)

getInstance Static method to get the scrollspy instance associated with a DOM element.

getOrCreateInstance Static method to get the scrollspy instance associated with a DOM element, or to
create a new one in case it wasn’t initialized.

refresh When adding or removing elements in the DOM, you’ll need to call the refresh
method.

Here’s an example using the refresh method:

const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')


dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})

Events
Event Description

activate.bs.scrollspy This event fires on the scroll element whenever an anchor is activated by the
scrollspy.

const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')


firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})

Bootstrap

https://getbootstrap.com/docs/5.3/components/scrollspy/ 9/10
12/3/24, 7:19 AM Scrollspy · Bootstrap v5.3

Designed and built with all the love in the world by the Bootstrap team with the
help of our contributors.

Code licensed MIT, docs CC BY 3.0.

Currently v5.3.3.

Links Guides
Home Getting started

Docs Starter template


Examples Webpack

Icons Parcel
Themes Vite
Blog

Swag Store

Projects Community
Bootstrap 5 Issues
Bootstrap 4 Discussions

Icons Corporate sponsors


RFS Open Collective
Examples repo Stack Overflow

https://getbootstrap.com/docs/5.3/components/scrollspy/ 10/10

You might also like