Scrollspy

• Installation
• Anchors links
• Scroller
• Methods

Installation

Scrollspy requires the following file:

• my-scrollspy.js

Anchors links

my-scrollspy="anchors" on any HTML tag applies….

    <nav class="">
        <a href="#section-description" class="my-btn mod-tab">Description</a>
        <a href="#section-reprise" class="my-btn mod-tab">Reprise</a>
        <a href="#section-financement" class="my-btn mod-tab">financement</a>
        <a href="#section-livraison" class="my-btn mod-tab">Livraison</a>
        <a href="#section-avis" class="my-btn mod-tab">Avis</a>
    </nav>
    <section id="section-description" my-scrollspy="anchors"><h2>Description</h2></section>
    <section id="section-reprise" my-scrollspy="anchors"><h2>Reprise</h2></section>
    <section id="section-financement" my-scrollspy="anchors"><h2>financement</h2></section>
    <section id="section-livraison" my-scrollspy="anchors"><h2>livraison</h2></section>
    <section id="section-avis" my-scrollspy="anchors"><h2>avis</h2></section>
    <!-- DEMO ONLY -->
    <style>
        body {
            background-color:  var(--briks-color-neutral-light-3);
        }
        nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: var(--briks-color-neutral-light-max);
        }
        section {
            height: 150vh;
            padding-top: 100px;
            background-color: var(--briks-color-neutral-light-max);
            margin-bottom: 100px;
        }
    </style>

Scroller

my-scrollspy="scroller" on first child and last child of a scrollable HTML container.

<nav>
    <button id="scroller-prev" 
            role="navigation" 
            aria-command="previous" 
            class="my-btn mod-sticker">
        <span class="icon-arrow-left"></span>
    </button>
    <button id="scroller-next" 
            role="navigation" 
            aria-command="next" 
            class="my-btn mod-sticker">
        <span class="icon-arrow-right"></span>
    </button>
</nav>
<ul class="my-grid mod-nowrap mod-gutter-large u-o-auto u-ta-center" style="scroll-snap-type: x;">
    
        <li my-scrollspy="scroller" data-target-id="scroller-prev"  class="mod-fw-medium u-bc-neutral-light-4 u-p-xl u-fs-xl" style="scroll-snap-align: start;">1</li>
    
        <li   class="mod-fw-medium u-bc-neutral-light-4 u-p-xl u-fs-xl" style="scroll-snap-align: start;">2</li>
    
        <li   class="mod-fw-medium u-bc-neutral-light-4 u-p-xl u-fs-xl" style="scroll-snap-align: start;">3</li>
    
        <li   class="mod-fw-medium u-bc-neutral-light-4 u-p-xl u-fs-xl" style="scroll-snap-align: start;">4</li>
    
        <li   class="mod-fw-medium u-bc-neutral-light-4 u-p-xl u-fs-xl" style="scroll-snap-align: start;">5</li>
    
        <li  my-scrollspy="scroller" data-target-id="scroller-next" class="mod-fw-medium u-bc-neutral-light-4 u-p-xl u-fs-xl" style="scroll-snap-align: start;">6</li>
    
</ul>

<h2>Second instance</h2>
<nav>
    <button id="scroller-prev-alt" 
            role="navigation" 
            aria-command="previous" 
            class="my-btn mod-tab">
        <span class="icon-arrow-left"></span>
    </button>
    <button id="scroller-next-alt" 
            role="navigation" 
            aria-command="next" 
            class="my-btn mod-tab">
        <span class="icon-arrow-right"></span>
    </button>
</nav>
<ul class="my-grid mod-nowrap mod-gutter-large u-o-auto u-ta-center" style="scroll-snap-type: x mandatory;">
    
        <li my-scrollspy="scroller" data-target-id="scroller-prev-alt"  class="mod-fw-medium u-bc-neutral-light-4 u-p-xl u-fs-xl" style="scroll-snap-align: start;">1</li>
    
        <li   class="mod-fw-medium u-bc-neutral-light-4 u-p-xl u-fs-xl" style="scroll-snap-align: start;">2</li>
    
        <li   class="mod-fw-medium u-bc-neutral-light-4 u-p-xl u-fs-xl" style="scroll-snap-align: start;">3</li>
    
        <li   class="mod-fw-medium u-bc-neutral-light-4 u-p-xl u-fs-xl" style="scroll-snap-align: start;">4</li>
    
        <li  my-scrollspy="scroller" data-target-id="scroller-next-alt" class="mod-fw-medium u-bc-neutral-light-4 u-p-xl u-fs-xl" style="scroll-snap-align: start;">5</li>
    
</ul>
<!-- DEMO ONLY -->
<style>
    body {
        padding:  var(--briks-spacing-md);
    }
</style>

Methods

Scrollspy comes with methods that can be called through myScrollspy object :

Method name	Arguments	Description
myScrollspy.update()	no	Build/refresh instances of all tracked elements, invoked at start