v-scrollspy

A Vue scrollspy directive using the Intersection Observer API.

It's a thin wrapper of @jfm/scrollspy library.

Install

npm install v-scrollspy

Usage

<template>
  <main>
    <section id="1" v-scrollspy="onScrollTo">
      <h1>1</h1>
      <p>...</p>
    </section>

    <section id="2" v-scrollspy="onScrollTo">
      <h1>2</h1>
      <p>...</p>
    </section>

    <section id="3" v-scrollspy="onScrollTo">
      <h1>3</h1>
      <p>...</p>
    </section>
  </main>
</template>

<script>
import scrollspy from 'v-scrollspy'

export default {
  directives: { scrollspy },

  data: () => ({
    active: ''
  }),

  methods: {
    onScrollTo(el) {
      this.active = el.id
    }
  }
}
</script>

License

MIT