How it works

Scrollspy has a few requirements to function properly:

  • It must be used on a Bootstrap nav component or list group.
  • Scrollspy requires position: relative; 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.

Scrollable containers and keyboard access

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.

Example in navbar

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

Scrollspy - 图1

  1. <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  2.   <a class="navbar-brand" href="#">Navbar</a>
  3.   <ul class="nav nav-pills">
  4.     <li class="nav-item">
  5.       <a class="nav-link" href="#scrollspyHeading1">First</a>
  6.     </li>
  7.     <li class="nav-item">
  8.       <a class="nav-link" href="#scrollspyHeading2">Second</a>
  9.     </li>
  10.     <li class="nav-item dropdown">
  11.       <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
  12.       <ul class="dropdown-menu">
  13.         <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
  14.         <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
  15.         <li><hr class="dropdown-divider"></li>
  16.         <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
  17.       </ul>
  18.     </li>
  19.   </ul>
  20. </nav>
  21. <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  22.   <h4 id="scrollspyHeading1">First heading</h4>
  23.   <p>...</p>
  24.   <h4 id="scrollspyHeading2">Second heading</h4>
  25.   <p>...</p>
  26.   <h4 id="scrollspyHeading3">Thidd heading</h4>
  27.   <p>...</p>
  28.   <h4 id="scrollspyHeading4">Fourth heading</h4>
  29.   <p>...</p>
  30.   <h4 id="scrollspyHeading5">Fifth heading</h4>
  31.   <p>...</p>
  32. </div>

Example with nested nav

Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change.

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.     </nav>
  9.     <a class="nav-link" href="#item-2">Item 2</a>
  10.     <a class="nav-link" href="#item-3">Item 3</a>
  11.     <nav class="nav nav-pills flex-column">
  12.       <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
  13.       <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
  14.     </nav>
  15.   </nav>
  16. </nav>
  18. <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  19.   <h4 id="item-1">Item 1</h4>
  20.   <p>...</p>
  21.   <h5 id="item-1-1">Item 1-1</h5>
  22.   <p>...</p>
  23.   <h5 id="item-1-2">Item 1-2</h5>
  24.   <p>...</p>
  25.   <h4 id="item-2">Item 2</h4>
  26.   <p>...</p>
  27.   <h4 id="item-3">Item 3</h4>
  28.   <p>...</p>
  29.   <h5 id="item-3-1">Item 3-1</h5>
  30.   <p>...</p>
  31.   <h5 id="item-3-2">Item 3-2</h5>
  32.   <p>...</p>
  33. </div>

Example with list-group

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

Scrollspy - 图3

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

Usage

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 {
  2.   position: relative;
  3. }
  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>

Via JavaScript

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

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:

  1. var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
  2. dataSpyList.forEach(function (dataSpyEl) {
  3.   bootstrap.ScrollSpy.getInstance(dataSpyEl)
  4.     .refresh()
  5. })

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

Options

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

NameTypeDefaultDescription
offsetnumber10Pixels to offset from top when calculating position of scroll.
methodstringautoFinds which section the spied element is in. auto will choose the best method to get scroll coordinates. offset will use the Element.getBoundingClientRect() method to get scroll coordinates. position will use the HTMLElement.offsetTop and HTMLElement.offsetLeft properties to get scroll coordinates.
targetstring | jQuery object | DOM elementSpecifies element to apply Scrollspy plugin.

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.   // do something...
  4. })