Vue Scrollspy

Description

A vue component for detecting enter/exit of elements in the viewport when the user scrolls.

Vue组件，用于当用户滚动内容时，检测节点进出视窗的情况，实现导航和节点内容的双向绑定

Demo

Installation

npm install vue-use-scrollspy -S

Usage

import Scrollspy from 'vue-use-scrollspy'

Props

prop	description	type	default	required
items	id list of target elements	Array	[]	true
el	selector of elements container	String	window	false
current	current actived id, can use .sync modifier to two-way data bindings	String	--	false
activeClass	class name that apply to the element in viewport	String	--	false
offset	offset value that ajust to determine the elements are in the viewport	Number	--	false
tag	to specify which tag to render to	String	div	false

Events

name	description	params
on-update	Emit when current is changed	current actived id

Example

<div>
  <nav>
    <scroll-spy
      :items="['#selection-1', '#selection-2', '#selection-3']"
      class="scroll-spy"
      tag="ul"
      active-class="active-class">
      <li><a href="#selection-1">One</a></li>
      <li><a href="#selection-2">Two</a></li>
      <li><a href="#selection-3">Three</a></li>
    </scroll-spy>
  </nav>
  <article>
    <section id="selection-1">...</section>
    <section id="selection-2">...</section>
    <section id="selection-3">...</section>
  </article>
</div>

License

MIT