Scrollspy

Uses CSS Carousel specs for a scrollspy only with HTML and CSS. Inspired by Scroll Spy example on chrome.dev.

Some browsers might not be supported. As of writing works best with Chromium based browsers.

Example with List group

Group 1
Item 1.1
Item 1.2
Item 1.3
Item 1.4
Group 2
Item 2.1
Item 2.2
Item 2.3
Item 2.4
Group 3
Item 3.1
Item 3.2
Item 3.3
Item 3.4
Group 4
Item 4.1
Item 4.2
Item 4.3
Item 4.4
Code 
<div class="blue-scrollspy" aria-live="polite" style="height: 200px">
    <section aria-label="Group 1" class="list-group mb-1 m-last-0">
        <header class="list-group-item bg-body-tertiary fw-bold">Group 1</header>
        <div class="list-group-item">Item 1.1</div>
        <div class="list-group-item">Item 1.2</div>
        <div class="list-group-item">Item 1.3</div>
        <div class="list-group-item">Item 1.4</div>
    </section>

    <section aria-label="Group 2" class="list-group mb-1 m-last-0">
        <header class="list-group-item bg-body-tertiary fw-bold">Group 2</header>
        <div class="list-group-item">Item 2.1</div>
        <div class="list-group-item">Item 2.2</div>
        <div class="list-group-item">Item 2.3</div>
        <div class="list-group-item">Item 2.4</div>
    </section>

    <section aria-label="Group 3" class="list-group mb-1 m-last-0">
        <header class="list-group-item bg-body-tertiary fw-bold">Group 3</header>
        <div class="list-group-item">Item 3.1</div>
        <div class="list-group-item">Item 3.2</div>
        <div class="list-group-item">Item 3.3</div>
        <div class="list-group-item">Item 3.4</div>
    </section>

    <section aria-label="Group 4" class="list-group mb-1 m-last-0">
        <header class="list-group-item bg-body-tertiary fw-bold">Group 4</header>
        <div class="list-group-item">Item 4.1</div>
        <div class="list-group-item">Item 4.2</div>
        <div class="list-group-item">Item 4.3</div>
        <div class="list-group-item">Item 4.4</div>
    </section>
</div>

You can also make the scrollmarkers appear after

Group 1
Item 1.1
Item 1.2
Item 1.3
Item 1.4
Group 2
Item 2.1
Item 2.2
Item 2.3
Item 2.4
Group 3
Item 3.1
Item 3.2
Item 3.3
Item 3.4
Group 4
Item 4.1
Item 4.2
Item 4.3
Item 4.4
Code 
<div class="blue-scrollspy blue-scrollspy-after" aria-live="polite" style="height: 200px">
    <section aria-label="Group 1" class="list-group mb-1">
        <header class="list-group-item bg-body-tertiary fw-bold">Group 1</header>
        <div class="list-group-item">Item 1.1</div>
        <div class="list-group-item">Item 1.2</div>
        <div class="list-group-item">Item 1.3</div>
        <div class="list-group-item">Item 1.4</div>
    </section>

    <section aria-label="Group 2" class="list-group mb-1">
        <header class="list-group-item bg-body-tertiary fw-bold">Group 2</header>
        <div class="list-group-item">Item 2.1</div>
        <div class="list-group-item">Item 2.2</div>
        <div class="list-group-item">Item 2.3</div>
        <div class="list-group-item">Item 2.4</div>
    </section>

    <section aria-label="Group 3" class="list-group mb-1">
        <header class="list-group-item bg-body-tertiary fw-bold">Group 3</header>
        <div class="list-group-item">Item 3.1</div>
        <div class="list-group-item">Item 3.2</div>
        <div class="list-group-item">Item 3.3</div>
        <div class="list-group-item">Item 3.4</div>
    </section>

    <section aria-label="Group 4" class="list-group">
        <header class="list-group-item bg-body-tertiary fw-bold">Group 4</header>
        <div class="list-group-item">Item 4.1</div>
        <div class="list-group-item">Item 4.2</div>
        <div class="list-group-item">Item 4.3</div>
        <div class="list-group-item">Item 4.4</div>
    </section>
</div>

Grab the code

When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.

  1. Copy and paste the following code into your project. Source: @/dist/styles/_scrollspy.scss
Edit post on GitHub