Bootstrap 5 Scrollspy Methods
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.
Bootstrap 5 Scrollspy Methods: 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.
- getInstance() method: This function is a static method that is used to get the instance of the scrollspy associated with the given DOM 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.
- refresh() method: This function is used to refresh the scrollspy instance. It is used when you are adding or removing elements in the DOM.
Syntax:
- To get/create the instance of the Scrollspy element:
// For getting the instance bootstrap.ScrollSpy.getInstance(element) // For creating and getting the instance bootstrap.ScrollSpy.getOrCreateInstance(element)
- To perform dispose/refresh method:
scrollSpyInstance.dispose() // to dispose scrollSpyInstance.refresh() // to 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.
HTML
<!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" > w3wiki </ 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.
HTML
<!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" > w3wiki </ 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.
Reference: https://getbootstrap.com/docs/5.2/components/scrollspy/#methods
Contact Us