Bootstrap 5 — List Groups and Scrollspys

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add scrollspys with list groups and more with Bootstrap 5.

List Group and Scrollspys

We can use list groups as navigation component for scrollspys.

For example, we can write:

<div class='row'>
  <div class='col-3'>
    <div id="list-example" class="list-group">
      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
    </div>
  </div>

<div data-spy="scroll" data-target="#list-example" data-offset="0" class='col-9' style='max-height: 300px; overflow-y: scroll'>
    <h4 id="list-item-1">Item 1</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. </p>
    <h4 id="list-item-2">Item 2</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. </p>
    <h4 id="list-item-3">Item 3</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. </p>
    <h4 id="list-item-4">Item 4</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. </p>
  </div>
</div>

We have the list group on the left side to show the entry that we’ve scrolled to.

The right side has the content.

We set the overflow-y to scroll and have the IDs match the href of the links on the list group.

The data-target is set to the ID of the list group.

JavaScript

We can add scrollspys with the bootstrap.ScrollSpy constructor.

For example, we can write:

const scrollSpy = new bootstrap.ScrollSpy(document.getElementById('content'), {
  target: '#list-example'
})

We can then call the refresh method on it to refresh the scrollspy:

const dataSpyList = [...document.querySelectorAll('[data-spy="scroll"]')];

dataSpyList.forEach((dataSpyEl) => {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

We get the scrollspy element and call refresh on them.

Events

The activate.bs.scrollspy event is emitted whenever a new item is activated on a scrollspy.

And we can listen to it by writing:

const scrollSpyEl = document.querySelector('[data-spy="scroll"]')
scrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
  //...
})

Conclusion

We can use list groups with scrollspys.

Also, we can use JavaScript to manipulate them.