Bootstrap5 Scrollspy Methods are used to control the Scrollspy element with the help of Javascript and perform operations like disposing, getting or creating the Scrollspy instance, refreshing the element, etc along with finding out useful data about the widget within Javascript.
It is used in automatically update navigation or list group links based on scroll position. This is particularly useful for highlighting sections in a long page, providing a better user experience.
Bootstrap 5 Scrollspy Methods:
The Scrollspy component includes several methods to control its behavior with JavaScript. These methods allow you to create, refresh, or destroy Scrollspy instances and obtain useful data about the widget.
The Scrollspy component comes with the following methods:
- dispose() method: This function is used to destroy an element's scrollspy. Basically, it removes the stored data of the DOM element.
// to dispose
scrollSpyInstance.dispose();
- getInstance() method: This function is a static method that is used to get the instance of the scrollspy associated with the given DOM element.
// For getting the instance
bootstrap.ScrollSpy.getInstance(element);
- getOrCreateInstance() method: This function is also a static method to get the scrollspy instance of the associated DOM element or used to create the scrollspy instance if in case it wasn't initialized.
// For creating and getting the instance
bootstrap.ScrollSpy.getOrCreateInstance(element);
- refresh() method: This function is used to refresh the scrollspy instance. It is used when you are adding or removing elements in the DOM.
// to refresh
scrollSpyInstance.refresh();
Example 1: In this example, we have a scrollspy element and we use the getOrCreateInstance method to create an instance of the element and then obtain that instance and its properties on the console. Here, we haven't used the dispose method to dispose the instances.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<title>
Bootstrap 5 Scrollspy Methods
</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous" />
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h4>
Bootstrap 5 Scrollspy Methods
</h4>
<h5 class="mt-5">
Top GFG Articles For You:
</h5>
<div class="row my-3 bg-dark text-light p-3">
<div class="col-2">
<div id="my-nav" class="list-group">
<a class= "list-group-item
list-group-item-action"
href="#e1">
Article 1
</a>
<a class= "list-group-item
list-group-item-action"
href="#e2">
Article 2
</a>
<a class= "list-group-item
list-group-item-action"
href="#e3">
Article 3
</a>
<a class= "list-group-item
list-group-item-action"
href="#e4">
Article 4
</a>
</div>
</div>
<div class="col-6">
<div style="height: 200px;
overflow-y: scroll;"
id="scrollSpy"
data-bs-spy="scroll"
data-bs-target="my-nav"
data-bs-smooth-scroll="true"
tabindex="0">
<h4 id="e1">
How to Create a QR Code – 4 Ways to
Generate Dynamic QR Code For Free
</h4>
<p>
Ever since UPI payment was launched in
India, more than 50% of people have
relied on the QR Code payment system.
Well, this is one of the examples of
how people heavily depend on QR codes
to simplify their tasks. Previously,
QR codes weren’t popular as mobile
phones didn’t have the feature that has
native QR scanning capabilities.
</p>
<h4 id="e2"
class="mt-5">
7 Reasons to Update Your LinkedIn
Profile in 2023
</h4>
<p>
Updating your social media handles
regularly is a must to stay afloat
in the digital world. LinkedIn is one
such platform that is coming up with
various new features every now and then,
so it is apt to say that if you are a
LinkedIn user and want to leverage the
potential of this platform, then you have
to keep your profile updated.
</p>
<h4 id="e3"
class="mt-5">
Puzzle | The Alien Extinction Riddle
</h4>
<p>
An alien visits Earth one day. Each alien
accomplishes one of the following four
actions every day, with equal likelihood:
Kill himself, Do nothing, Divide into two
aliens (while killing itself), Divided
itself into three aliens (while killing
itself). What is the probability that
the alien species eventually die out entirely?
</p>
<h4 id="e4"
class="mt-5">
Maximum triplets containing atleast one
x and one y
</h4>
<p>
Given counts of x, y, and z, the task is
to find the max number of triplets that
can be made from the count of x, y,
and z such that one triplet contains at
least one x and at least one y. It is
not necessary to use all x, y, and z.
</p>
</div>
</div>
</div>
</div>
<script>
const scrollSpyElement =
bootstrap.ScrollSpy.getOrCreateInstance(
document.querySelector("#scrollSpy"));
console.log(scrollSpyElement);
</script>
</body>
</html>
Output:
Example 2: In this example, we use the getOrCreateInstance method to get the instance and then dispose the instance using the dispose method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<title>
Bootstrap 5 Scrollspy Methods
</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous" />
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h4>
Bootstrap 5 Scrollspy Methods
</h4>
<h5 class="mt-5">
Top GFG Articles For You:
</h5>
<div class="row my-3 bg-dark
text-light p-3">
<div class="col-2">
<div id="my-nav"
class="list-group">
<a class="list-group-item
list-group-item-action"
href="#e1">
Article 1
</a>
<a class="list-group-item
list-group-item-action"
href="#e2">
Article 2
</a>
<a class="list-group-item
list-group-item-action"
href="#e3">
Article 3
</a>
<a class="list-group-item
list-group-item-action"
href="#e4">
Article 4
</a>
</div>
</div>
<div class="col-6">
<div style="height: 200px;
overflow-y: scroll;"
id="scrollSpy"
data-bs-spy="scroll"
data-bs-target="my-nav"
data-bs-smooth-scroll="true"
tabindex="0">
<h4 id="e1">
How to Create a QR Code – 4 Ways to
Generate Dynamic QR Code For Free
</h4>
<p>
Ever since UPI payment was launched
in India, more than 50% of people
have relied on the QR Code payment
system.Well, this is one of the
examples of how people heavily depend
on QR codes to simplify their tasks.
Previously, QR codes weren’t popular
as mobile phones didn’t have the
feature that has native QR
scanning capabilities.
</p>
<h4 id="e2" class="mt-5">
7 Reasons to Update Your LinkedIn
Profile in 2023
</h4>
<p>
Updating your social media handles
regularly is a must to stay afloat
in the digital world. LinkedIn is one
such platform that is coming up with
various new features every now and then,
so it is apt to say that if you are
a LinkedIn user and want to leverage
the potential of this platform, then
you have to keep your profile updated.
</p>
<h4 id="e3" class="mt-5">
Puzzle | The Alien Extinction Riddle
</h4>
<p>
An alien visits Earth one day. Each
alien accomplishes one of the following
four actions every day, with equal
likelihood: Kill himself, Do nothing,
Divide into two aliens (while killing
itself), Divided tself into three aliens
(while killing itself). What is the
probability that the alien species
eventually die out entirely?
</p>
<h4 id="e4"
class="mt-5">
Maximum triplets containing atleast
one x and one y
</h4>
<p>
Given counts of x, y, and z, the task is to
find the maximum number of triplets that
can be made from the count of x, y, and z
such that one triplet contains at least
one x and at least one y. It is not
necessary to use all x, y, and z.
</p>
</div>
</div>
</div>
</div>
<script>
const scrollSpyElement =
bootstrap.ScrollSpy.getOrCreateInstance(
document.querySelector("#scrollSpy"));
scrollSpyElement.dispose();
console.log(scrollSpyElement);
</script>
</body>
</html>
Output: From the output, the dispose method does not affect the scrollspy element but removes all the stored data of that element, and hence in output we have all the values of the scrollspy object set to null.
Common Use Cases
- Highlighting navigation items as the user scrolls through sections.
- Keeping track of scroll positions in one-page websites or documentation pages.
Bootstrap 5's Scrollspy component and its methods provide powerful tools for enhancing user navigation experience. By understanding and utilizing these methods, developers can efficiently manage and manipulate Scrollspy instances.
Reference: https://getbootstrap.com/docs/5.2/components/scrollspy/#methods