web
mobile
Edit these docs Rate these docs

Scroll Spy

Vue Bootstrap Scroll Spy - Bootstrap 4 & Material Design

The v-mdb-scroll-spy directive shows on navigation list current scroll position (the default reference container is window). 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 - you can modify this behaviour by passing custom callback function.

The directive is collecting href attributes from the component it's attached to - it can be used with a variety of components such as mdbNavbar, mdbListGroup and more. It offers the following customization options:

  • container - by default its value is set to window. The directive selects the element with the given ID as the reference container
  • visible - the part of the section which needs to be visible in order to activate the corresponding link. Accepts values from 0 to 1 (the default value is 0.5)
  • callback - name of the method which will be called with the active link's index once it changes
  • loading - option available with the async modifier - chnaging its value from true to false will trigger recalculating scrollspy

Adding the .async

modifier will enable recalculating the directive's data based on loading value.
Live Preview

Basic usage

Step 1: Import the directive from 'mdbvue'


        <script>
          import { mdbScrollSpy } from "mdbvue";
        </script>
      

Step 2: Add mdbScrollSpy to the directives object


        <script>
          import { mdbScrollSpy } from "mdbvue";
          export default {
            directives: {
              mdbScrollSpy
            }
          };
        </script>
      

Step 3: Attach the directive to the navigation container


        <template>
          <ul v-mdb-scroll-spy>
            <li><a href="...">Link 1</a></li>
          </ul>
        </template>
      

Step 4: If you want to use the ScrollSpy on a certain container or specify the custom callback, pass an object as the directive's value. The method will be called with a href's index as an argument.


        <template>
          <div>
            <ul
              v-mdb-scroll-spy="{container: 'custom-container', callback: 'customCallback'}"
            >
              <li><a href="#section-1">Section 1</a></li>
            </ul>
            <div
              id="custom-container"
              style="max-height: 100px; overflow-y: scroll;"
            >
              <p id="section-1">...</p>
            </div>
          </div>
        </template>
      

        <script>
          import { mdbScrollSpy, mdbBtn } from "mdbvue";
          export default {
            directives: {
              mdbScrollSpy
            },
            methods: {
              customCallback(i) {
                //...
              }
            }
          };
        </script>
      

Tabs example MDB Pro component

To change the reference container from the window, pass the ID as the value of the container.

Scroll down to see the effect

section1

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

section2

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

section3

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.


        <template>
          <section>
            <mdb-tab
              tabs
              card
              justify
              color="default"
              class="mt-4 mx-4"
              v-mdb-scroll-spy="{ container: 'scroll-container' }"
            >
              <mdb-tab-item
                v-for="(section, i) in sections"
                :key="i"
                :href="`#${section.id}`"
                :active="tabs === i"
                @click.native="tabs = i"
                >{{ section.topic }}</mdb-tab-item
              >
            </mdb-tab>
            <div
              id="scroll-container"
              class="mt-5 mx-4"
              style="max-height: 300px; overflow-y: scroll;"
            >
              <div v-for="(section, i) in sections" :key="i" :id="section.id">
                <h3>{{ section.topic }}</h3>
                <p>{{ section.text }}</p>
              </div>
            </div>
          </section>
        </template>
      

        <script>
          import { mdbTab, mdbTabItem, mdbScrollSpy } from "mdbvue";

          export default {
            name: "ScrollSpyProPage",
            components: {
              mdbTab,
              mdbTabItem
            },
            data() {
              return {
                tabs: 0,
                sections: [
                  {
                    id: "section1",
                    topic: "section 1",
                    text:
                      "Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat."
                  },
                  {
                    id: "section2",
                    topic: "section 2",
                    text:
                      "Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat."
                  },
                  {
                    id: "section3",
                    topic: "section 3",
                    text:
                      "Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat."
                  }
                ]
              };
            },

            directives: { mdbScrollSpy }
          };
        </script>
      


Example with nested nav

Item 1

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Item 1-1

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Item 2-2

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Item 2

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Item 3

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Item 3-1

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Item 3-2

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.


        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col sm="4" lg="3">
                <mdb-navbar :toggler="false" color="grey" class="lighten-4">
                  <mdb-navbar-nav
                    vertical
                    v-mdb-scroll-spy="{
                            container: 'nested',
                            callback: 'setActiveLink'
                          }"
                    class="nav-pills"
                  >
                    <mdb-nav-item
                      href="#item-1"
                      :active="nested === 0 || nested === 1 || nested === 2"
                      >Item 1</mdb-nav-item
                    >
                    <mdb-navbar-nav vertical>
                      <mdb-nav-item
                        :active="nested === 1"
                        class="ml-3 my-1"
                        href="#item-1-1"
                        >Item 1-1</mdb-nav-item
                      >
                      <mdb-nav-item
                        :active="nested === 2"
                        class="ml-3 my-1"
                        href="#item-1-2"
                        >Item 1-2</mdb-nav-item
                      >
                    </mdb-navbar-nav>
                    <mdb-nav-item href="#item-2" :active="nested === 3"
                      >Item 2</mdb-nav-item
                    >
                    <mdb-nav-item
                      href="#item-3"
                      :active="nested === 4 || nested === 5 || nested === 6"
                      >Item 3</mdb-nav-item
                    >
                    <mdb-navbar-nav vertical>
                      <mdb-nav-item
                        :active="nested === 5"
                        class="ml-3 my-1"
                        href="#item-3-1"
                        >Item 3-1</mdb-nav-item
                      >
                      <mdb-nav-item
                        :active="nested === 6"
                        class="ml-3 my-1"
                        href="#item-3-2"
                        >Item 3-2</mdb-nav-item
                      >
                    </mdb-navbar-nav>
                  </mdb-navbar-nav>
                </mdb-navbar>
              </mdb-col>

              <mdb-col sm="8" lg="9">
                <div
                  class="z-depth-1 p-3"
                  style="max-height: 325px; overflow-y: scroll;"
                  id="nested"
                >
                  <div id="item-1">
                    <h4>Item 1</h4>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                  <div id="item-1-1">
                    <h5>Item 1-1</h5>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                  <div id="item-1-2">
                    <h5>Item 1-2</h5>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                  <div id="item-2">
                    <h4>Item 2</h4>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                  <div id="item-3">
                    <h4>Item 3</h4>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                  <div id="item-3-1">
                    <h5>Item 3-1</h5>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                  <div id="item-3-2">
                    <h5>Item 3-2</h5>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                </div>
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>
      

        <script>
          import {
            mdbContainer,
            mdbNavbar,
            mdbNavbarNav,
            mdbNavItem,
            mdbRow,
            mdbCol,
            mdbScrollSpy
          } from "mdbvue";

          export default {
            name: "ScrollSpyPage",
            components: {
              mdbContainer,
              mdbNavbar,
              mdbNavbarNav,
              mdbNavItem,
              mdbRow,
              mdbCol
            },
            data() {
              return {
                nested: 0
              };
            },
            methods: {
              setActiveLink(i) {
                this.nested = i;
              }
            },
            directives: { mdbScrollSpy }
          };
        </script>
      

Example with list-group

Item 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 4

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.


        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col sm="4">
                <mdb-list-group
                  v-mdb-scroll-spy="{ container: 'container', callback: 'setActive' }"
                  class="scrollspy"
                >
                  <mdb-list-group-item
                    action
                    :active="i === active"
                    tag="a"
                    :href="`#${section.id}`"
                    v-for="(section, i) in scrollSections"
                    :key="section.id"
                  >
                    {{ section.title }}
                  </mdb-list-group-item>
                </mdb-list-group>
              </mdb-col>
              <mdb-col>
                <div
                  class="z-depth-1 p-5"
                  id="container"
                  style="height: 500px; overflow-y: scroll"
                >
                  <div
                    v-for="section in scrollSections"
                    :id="section.id"
                    :key="section.id"
                  >
                    <h5>{{ section.title }}</h5>
                    <p>{{ section.content }}</p>
                  </div>
                </div>
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>
      

        <script>
          import {
            mdbContainer,
            mdbRow,
            mdbCol,
            mdbListGroup,
            mdbListGroupItem,
            mdbScrollSpy
          } from "mdbvue";

          export default {
            name: "ScrollSpyPage",
            components: {
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbListGroup,
              mdbListGroupItem
            },
            data() {
              return {
                active: 0,
                nav: 0,
                scrollSections: [
                  {
                    id: "section1",
                    title: "First title",
                    content:
                      "Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat."
                  },
                  {
                    id: "section2",
                    title: "Second title",
                    content:
                      "Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat."
                  },
                  {
                    id: "section3",
                    title: "Third title",
                    content:
                      "Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat."
                  }
                ]
              };
            },
            methods: {
              setActive(i) {
                this.active = i;
              }
            },
            directives: { mdbScrollSpy }
          };
        </script>
      

MDB Scrollspy MDB Pro component

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!


Subsection 1A

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!


Subsection 1B

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!


Subsection 1C

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!

Section 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!


Subsection 2A

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!


Subsection 2B

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!


Subsection 2C

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa at provident qui doloremque libero quo non pariatur quaerat iure, nostrum, possimus vitae sequi officiis quasi dolores asperiores earum quis!


      <template>
        <mdb-container>
          <mdb-row>
            <mdb-col sm="4" lg="3">
              <mdb-navbar
                :toggler="false"
                class="z-depth-0"
                id="mdb-scrollspy-ex"
              >
                <mdb-navbar-nav
                  vertical
                  v-mdb-scroll-spy="{
                          container: 'mdb-scrollspy-container',
                          callback: 'setActiveLink',
                          visible: 0.2
                        }"
                  class="nav-pills default-pills"
                >
                  <mdb-nav-item
                    href="#section-1"
                    :active="
                            nested === 0 || nested === 1 || nested === 2 || nested === 3
                          "
                    >Section 1</mdb-nav-item
                  >
                  <mdb-navbar-nav vertical>
                    <mdb-nav-item
                      :active="nested === 1"
                      class="ml-3 my-1"
                      href="#subsection-1a"
                      >Subsection 1A</mdb-nav-item
                    >
                    <mdb-nav-item
                      :active="nested === 2"
                      class="ml-3 my-1"
                      href="#subsection-1b"
                      >Subsection 1B</mdb-nav-item
                    >
                    <mdb-nav-item
                      :active="nested === 3"
                      class="ml-3 my-1"
                      href="#subsection-1c"
                      >Subsection 1C</mdb-nav-item
                    >
                  </mdb-navbar-nav>

                  <mdb-nav-item
                    href="#section-2"
                    :active="
                            nested === 4 || nested === 5 || nested === 6 || nested === 7
                          "
                    >Section 2</mdb-nav-item
                  >
                  <mdb-navbar-nav vertical>
                    <mdb-nav-item
                      :active="nested === 5"
                      class="ml-3 my-1"
                      href="#subsection-2a"
                      >Subsection 2A</mdb-nav-item
                    >
                    <mdb-nav-item
                      :active="nested === 6"
                      class="ml-3 my-1"
                      href="#subsection-2b"
                      >Subsection 2B</mdb-nav-item
                    >
                    <mdb-nav-item
                      :active="nested === 7"
                      class="ml-3 my-1"
                      href="#subsection-2c"
                      >Subsection 2C</mdb-nav-item
                    >
                  </mdb-navbar-nav>
                </mdb-navbar-nav>
              </mdb-navbar>
            </mdb-col>

            <mdb-col sm="8" lg="9">
              <div
                class="z-depth-1"
                style="max-height: 325px; overflow-y: scroll;"
                id="mdb-scrollspy-container"
              >
                <div class="blue lighten-4 p-3">
                  <h4 id="section-1">Section 1</h4>
                  <p>
                    Ad leggings keytar, brunch id art party dolor labore.
                    Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                    farm-to-table bicycle rights whatever. Anim keffiyeh carles
                    cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon
                    irure. Cosby sweater lomo jean shorts, williamsburg hoodie
                    minim qui you probably haven't heard of them et cardigan
                    trust fund culpa biodiesel wes anderson aesthetic. Nihil
                    tattooed accusamus, cred irony biodiesel keffiyeh artisan
                    ullamco consequat.
                  </p>

                  <div id="subsection-1a" class="red lighten-4 p-3 mt-3">
                    <h5>Subsection 1A</h5>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                  <div id="subsection-1b" class="green lighten-4 p-3 mt-3">
                    <h5>Subsection 1B</h5>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                  <div id="subsection-1c" class="indigo lighten-4 p-3 mt-3">
                    <h4>Subsection 1C</h4>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                </div>
                <div class="blue lighten-4 p-3">
                  <h4 id="section-1">Section 2</h4>
                  <p>
                    Ad leggings keytar, brunch id art party dolor labore.
                    Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                    farm-to-table bicycle rights whatever. Anim keffiyeh carles
                    cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon
                    irure. Cosby sweater lomo jean shorts, williamsburg hoodie
                    minim qui you probably haven't heard of them et cardigan
                    trust fund culpa biodiesel wes anderson aesthetic. Nihil
                    tattooed accusamus, cred irony biodiesel keffiyeh artisan
                    ullamco consequat.
                  </p>

                  <div id="subsection-2a" class="red lighten-4 p-3 mt-3">
                    <h5>Subsection 2A</h5>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                  <div id="subsection-2b" class="green lighten-4 p-3 mt-3">
                    <h5>Subsection 2B</h5>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                  <div id="subsection-2c" class="indigo lighten-4 p-3 mt-3">
                    <h4>Subsection 2C</h4>
                    <p>
                      Ad leggings keytar, brunch id art party dolor labore.
                      Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                      farm-to-table bicycle rights whatever. Anim keffiyeh
                      carles cardigan. Velit seitan mcsweeney's photo booth 3
                      wolf moon irure. Cosby sweater lomo jean shorts,
                      williamsburg hoodie minim qui you probably haven't heard
                      of them et cardigan trust fund culpa biodiesel wes
                      anderson aesthetic. Nihil tattooed accusamus, cred irony
                      biodiesel keffiyeh artisan ullamco consequat.
                    </p>
                  </div>
                </div>
              </div>
            </mdb-col>
          </mdb-row>
        </mdb-container>
      </template>
    

      <script>
        import {
          mdbContainer,
          mdbRow,
          mdbCol,
          mdbNavbar,
          mdbNavbarNav,
          mdbNavItem,
          mdbScrollSpy
        } from "mdbvue";

        export default {
          name: "ScrollSpyProPage",
          components: {
            mdbContainer,
            mdbRow,
            mdbCol,
            mdbNavbar,
            mdbNavbarNav,
            mdbNavItem
          },
          data() {
            return {
              nested: 1
            };
          },
          methods: {
            setActiveLink(i) {
              this.nested = i;
            }
          },
          directives: { mdbScrollSpy }
        };
      </script>
    

      <style>
        #mdb-scrollspy-ex .nav-item {
          width: 100%;
        }

        #mdb-scrollspy-ex a {
          font-size: 0.8rem;
          font-weight: 400;
          line-height: 1.1rem;
          padding: 0 5px;
          margin-top: 3px;
          margin-bottom: 3px;
          color: black;
        }

        #mdb-scrollspy-ex li .active {
          font-weight: 600;
        }

        .mdb-scrollspy-ex-example {
          height: 200px;
        }
      </style>
    

Dotted Scrollspy MDB Pro component

Live Example

        <template>
          <section>
            <div class="dotted-scrollspy">
              <ul
                class="pl-0 clearfix d-none d-sm-flex flex-column"
                v-mdb-scroll-spy="{ visible: 1 }"
              >
                <li class="nav-item">
                  <a class="nav-link" href="#dot-1"><span></span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#dot-2"><span></span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#dot-3"><span></span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#dot-4"><span></span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#dot-5"><span></span></a>
                </li>
              </ul>
            </div>
            <div id="dot-1" class="blue" style="height: 40vh;"></div>
            <div id="dot-2" class="blue lighten-1" style="height: 40vh;"></div>
            <div id="dot-3" class="blue lighten-2" style="height: 40vh;"></div>
            <div id="dot-4" class="blue lighten-3" style="height: 40vh;"></div>
            <div id="dot-5" class="blue lighten-4" style="height: 40vh;"></div>
          </section>
        </template>
      

        <script>
          import { mdbScrollSpy } from "mdbvue";

          export default {
            directives: { mdbScrollSpy }
          };
        </script>