• It must be used on a Bootstrap or list group.
  • 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">
  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.     </nav>
  9.     <a class="nav-link" href="#item-2">Item 2</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>
  20.   <h5 id="item-1-1">Item 1-1</h5>
  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-2">Item 2</a>
  4.   <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</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 .nav component.

  1. <body data-bs-spy="scroll" data-bs-target="#navbar-example">
  3.   <div id="navbar-example">
  4.     <ul class="nav nav-tabs" role="tablist">
  5.       ...
  6.     </ul>
  7.   </div>
  8.   ...
  9. </body>
  1. var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  2.   target: '#navbar-example'
  3. })

Resolvable ID targets required

Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

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

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

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-offset="".

Events

Event typeDescription
activate.bs.scrollspyThis event fires on the scroll element whenever a new item becomes activated by the scrollspy.
  1. var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
  2. firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  3. })