Bootstrap 5 Scrollspy Methods

Last Updated : 28 Feb, 2023

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

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