Bootstrap 5 Scrollspy refresh() Method

Last Updated : 07 Jun, 2023

Bootstrap 5 Scrollspy provides a refresh() method that is invoked while including or discarding the elements in the DOM tree, i.e., it can be manually called to recalculate the active link based on the current scroll position. This method can be used to update the active link whenever the page content changes dynamically.

The ScrollSpy constructor is used to create a new scroll spy instance on the document.body element with the #navbar as the target. The refresh() method is called on the scrollspy instance to refresh the scrollspy.

Syntax:

let scrollspy = new bootstrap.ScrollSpy(document.body, {
     target: '#navbar'
})
scrollspy.refresh()

Approach 1: Here, the HTML code contains a navigation menu with four items. Each item is a hyperlink with a unique ID that corresponds to a section of the page that the user can scroll to. The ‘data-bs-spy‘, ‘data-bs-target‘, and ‘data-bs-offset‘ attributes are added to the container div to activate Scrollspy functionality. The JavaScript code initializes the Scrollspy by creating a new instance of the bootstrap.ScrollSpy class. An event listener is added to the “Toggle Section” button. When the button is clicked, this will show or hide one of the sections on the page.

After the display property is toggled, the scrollSpy.refresh() method is called to update the scroll spy. This method recalculates the positions of the target elements and updates the scrollspy accordingly.

Example 1: The following code example illustrates the basic usage of the refresh() Method for updating scrollspy after rendering/hiding sections.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
          Bootstrap Scrollspy Refresh Example 
      </title> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body class="m-3"> 
    <nav id="navbar" 
         class="navbar fixed-top  
                navbar-light 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="#scrollspy-list-item1"> 
                    Item 1 
                </a> 
            </li> 
            <li class="nav-item"> 
                <a class="nav-link" 
                   href="#scrollspy-list-item2"> 
                    Item 2 
                </a> 
            </li> 
            <li class="nav-item"> 
                <a class="nav-link" 
                   href="#scrollspy-list-item3"> 
                    Item 3 
                </a> 
            </li> 
            <li class="nav-item"> 
                <a class="nav-link" 
                   href="#scrollspy-list-item4"> 
                    Item 4 
                </a> 
            </li> 
        </ul> 
    </nav> 
    <br><br><br> 
    <h1 class="text-success text-center">GeeksforGeeks</h1> 
    <div data-bs-spy="scroll" 
         data-bs-target="#navbar-example2" 
         data-bs-offset="50" 
         tabindex="0"> 
        <div id="scrollspy-list-item1"> 
            <h4>Item 1</h4> 
            <p> 
              HTML stands for HyperText Markup Language. 
              It is used to design web pages using the 
              markup language. HTML is the combination  
              of Hypertext and Markup language. Hypertext 
              defines the link between the web pages and 
              markup language defines the text document 
              within the tag that define the structure 
              of web pages. 
          </p> 
        </div> 
        <div id="scrollspy-list-item2"> 
            <h4>Item 2</h4> 
            <p> 
              we will see the HTML Basics by understanding  
              all the basic stuff of HTML coding. There  
              are various tags that we must consider and 
              include while starting to code in HTML. 
              These tags help in the organization and  
              basic formatting of elements in our script 
              or web pages. These step-by-step procedures 
              will guide you through the process of  
              writing HTML. 
           </p> 
        </div> 
        <div id="scrollspy-list-item3"> 
            <h4>Item 3</h4> 
            <p> 
              CSS (Cascading Style Sheets)is used to 
              apply styles to web pages. Cascading Style 
              Sheets are fondly referred to as CSS. 
              It is used to make web pages presentable. 
              The reason for using this is to simplify  
              the process of making web pages presentable. 
              It allows you to apply styles on web pages. 
              More importantly, it enables you to do this 
              independently of the HTML that makes up each 
              web page. 
            </p> 
        </div> 
        <div id="scrollspy-list-item4"> 
            <h4>Item 4</h4> 
            <p> 
              Java is one of the most popular and widely used 
              programming language and platform. A platform is an 
              environment that helps to develop and run programs 
              written in any programming language. 
          </p> 
        </div> 
    </div> 
    <button id="toggle-section"
            class="btn btn-primary"> 
        Toggle Section 
    </button> 
  
    <script> 
        
        // Initialize Scrollspy 
        let scrollSpy = new bootstrap.ScrollSpy(document.body, { 
            target: '#navbar' 
        }); 
  
        // Add event listener to toggle-section button 
        let toggleSection2Btn =  
            document.getElementById('toggle-section'); 
        toggleSection2Btn.addEventListener('click', function () { 
            
            // Toggle the display property of section4 
            let section2 =  
                document.getElementById('scrollspy-list-item4'); 
            section2.style.display = 
                section2.style.display === 'none' ? 'block' : 'none'; 
            alert('item 4 changed'); 
            
            // Call refresh method to update Scrollspy 
            scrollSpy.refresh(); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Approach 2: Here, the code creates a fixed-top navbar with four navigation links that correspond to four sections on the page. The data-bs-spy attribute on the HTML div element that wraps these sections enables the Scrollspy component. The data-bs-target attribute specifies the ID of the navbar that will be used for navigation, and the data-bs-offset attribute specifies the number of pixels to offset from the top when calculating the position of scrollable elements.

The JavaScript code initializes the Scrollspy component using bootstrap.ScrollSpy constructor. Then, the code adds an event listener to the “Change Section Heights” button that randomly changes the height of each section using JavaScript’s Math.random() method. After each change, the code calls the Scrollspy’s refresh() method to update the scrollspy component with the new section heights.

Example 2: This code example demonstrates the usage of the refresh() Method for updating Scrollspy after dynamically changing section heights.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
          Bootstrap Scrollspy Refresh Example 
      </title> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body class="m-3"> 
    <nav id="navbar" 
         class="navbar fixed-top  
        navbar-light 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="#scrollspy-list-item1"> 
                    Item 1 
                  </a> 
            </li> 
            <li class="nav-item"> 
                <a class="nav-link" 
                   href="#scrollspy-list-item2"> 
                    Item 2 
                  </a> 
            </li> 
            <li class="nav-item"> 
                <a class="nav-link" 
                   href="#scrollspy-list-item3"> 
                    Item 3 
                  </a> 
            </li> 
            <li class="nav-item"> 
                <a class="nav-link" 
                   href="#scrollspy-list-item4"> 
                    Item 4 
                  </a> 
            </li> 
        </ul> 
    </nav> 
    <br><br><br> 
    <h1 class="text-success text-center"> 
        GeeksforGeeks 
    </h1> 
    <div data-bs-spy="scroll" 
         data-bs-target="#navbar-example2" 
         data-bs-offset="50" 
         tabindex="0"> 
        <h4 id="scrollspy-list-item1" 
            style="height:300px;  
                   border:3px solid red;"> 
            Item 1 
        </h4> 
  
        <h4 id="scrollspy-list-item2" 
            style="height:300px;  
                   border:3px solid blue;"> 
            Item 2 
        </h4> 
  
        <h4 id="scrollspy-list-item3" 
            style="height:300px;  
                   border:3px solid green;"> 
            Item 3 
        </h4> 
  
        <h4 id="scrollspy-list-item4" 
            style="height:300px;  
                   border:3px solid rgb(183, 51, 119);"> 
            Item 4 
        </h4> 
    </div> 
  
    <button id="change-section-height" 
            class="btn btn-primary mt-5"> 
        Change Section Heights 
    </button> 
    <script> 
        
        // Initialize Scrollspy 
        let scrollSpy =  
            new bootstrap.ScrollSpy(document.body, { 
            target: '#navbar' 
        }); 
  
        // Add event listener to change-section-height button 
        let changeSectionHeightBtn = 
            document.getElementById('change-section-height'); 
        changeSectionHeightBtn.addEventListener('click', function () { 
            let section1 =  
                document.getElementById('scrollspy-list-item1'); 
            section1.style.height =  
              (Math.random() * 700) + 'px'; 
  
            let section2 =  
                document.getElementById('scrollspy-list-item2'); 
            section2.style.height =  
              (Math.random() * 800) + 'px'; 
  
            let section3 =  
                document.getElementById('scrollspy-list-item3'); 
            section3.style.height =  
              (Math.random() * 500) + 'px'; 
  
            let section4 =  
                document.getElementById('scrollspy-list-item4'); 
            section4.style.height =  
              (Math.random() * 100) + 'px'; 
  
            scrollSpy.refresh(); 
        }); 
    </script> 
</body> 
  
</html>