Scrollspy

    Scrollspy has a few requirements to function properly:

    • It must be used on a Bootstrap nav component or .
    • Scrollspy requires on the element you’re spying on, usually the <body>.
    • Anchors (<a>) are required and must point to an element with that id.

    When successfully implemented, your nav or list group will update accordingly, moving the .active class from one item to the next based on their associated targets.

    If you’re making a scrollable container (other than the <body>), be sure to have a height set and overflow-y: scroll; applied to it—alongside a tabindex="0" to ensure keyboard access.

    Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.

    Scrollspy - 图2

    1. <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
    2.   <a class="navbar-brand" href="#">Navbar</a>
    3.   <nav class="nav nav-pills flex-column">
    4.     <a class="nav-link" href="#item-1">Item 1</a>
    5.     <nav class="nav nav-pills flex-column">
    6.       <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
    7.       <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
    8.     <a class="nav-link" href="#item-2">Item 2</a>
    9.     <a class="nav-link" href="#item-3">Item 3</a>
    10.     <nav class="nav nav-pills flex-column">
    11.       <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
    12.       <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    13.     </nav>
    14.   </nav>
    15. </nav>
    17. <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
    18.   <h4 id="item-1">Item 1</h4>
    19.   <p>...</p>
    21.   <p>...</p>
    22.   <h5 id="item-1-2">Item 1-2</h5>
    23.   <p>...</p>
    24.   <h4 id="item-2">Item 2</h4>
    25.   <p>...</p>
    26.   <h4 id="item-3">Item 3</h4>
    27.   <p>...</p>
    28.   <h5 id="item-3-1">Item 3-1</h5>
    29.   <p>...</p>
    30.   <h5 id="item-3-2">Item 3-2</h5>
    31.   <p>...</p>
    32. </div>

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

    1. <div id="list-example" class="list-group">
    2.   <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
    3.   <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
    4.   <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
    5. </div>
    6. <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
    7.   <h4 id="list-item-1">Item 1</h4>
    8.   <p>...</p>
    9.   <h4 id="list-item-2">Item 2</h4>
    10.   <p>...</p>
    11.   <h4 id="list-item-3">Item 3</h4>
    12.   <p>...</p>
    13.   <h4 id="list-item-4">Item 4</h4>
    14.   <p>...</p>
    15. </div>

    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 of the parent element of any Bootstrap component.

    1. <body data-bs-spy="scroll" data-bs-target="#navbar-example">
    2.   ...
    3.   <div id="navbar-example">
    4.     <ul class="nav nav-tabs" role="tablist">
    5.       ...
    6.     </ul>
    7.   </div>
    8.   ...
    9. </body>

    After adding position: relative; in your CSS, call the scrollspy via JavaScript:

    1. var scrollSpy = new bootstrap.ScrollSpy(document.body, {
    2.   target: '#navbar-example'
    3. })

    Resolvable ID targets required

    Non-visible target elements ignored

    Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.

    Methods

    refresh

    When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:

    dispose

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

    getInstance

    Static method which allows you to get the scrollspy instance associated with a DOM element

    1. var scrollSpyContentEl = document.getElementById('content')
    2. var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

    getOrCreateInstance

    Static method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn’t initialised

    1. var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

    Events

    Event typeDescription
    This event fires on the scroll element whenever a new item becomes activated by the scrollspy.