# vue-use-scrollspy

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

Latest version **0.1.3** (published 2019-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-use-scrollspy
pnpm add vue-use-scrollspy
yarn add vue-use-scrollspy
bun add vue-use-scrollspy
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2019-04-25 |
| First published | 2019-04-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 146.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | riadloc |
| Maintainers | hugoro |
| Keywords | vue, scrollspy, component, vue-component |

## Links

- npm: https://www.npmjs.com/package/vue-use-scrollspy
- Repository: https://github.com/Riadloc/vue-scrollspy
- Homepage: https://github.com/Riadloc/vue-scrollspy#readme
- Issues: https://github.com/Riadloc/vue-scrollspy/issues
- npm.io page: https://npm.io/package/vue-use-scrollspy

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.4.3

## Alternatives

- [pagerjs](https://npm.io/package/pagerjs.md) — 60 weekly downloads
- [whistle.savefor-mock](https://npm.io/package/whistle.savefor-mock.md) — 4 weekly downloads
- [vue-scroll-active-toc](https://npm.io/package/vue-scroll-active-toc.md) — 0 weekly downloads
- [@govuk-pay/run-amock](https://npm.io/package/@govuk-pay/run-amock.md) — 0 weekly downloads
- [@knockout-mdc/material-menu](https://npm.io/package/@knockout-mdc/material-menu.md) — 0 weekly downloads

## Recent versions

- 0.1.3 (latest) — 2019-04-25
- 0.1.2 — 2019-04-23
- 0.1.1 — 2019-04-23
- 0.1.0 — 2019-04-23

## README

# Vue Scrollspy
[![npm version](https://img.shields.io/npm/v/vue-use-scrollspy.svg?label=version&style=popout-square)](https://www.npmjs.com/package/vue-use-scrollspy)
[![size](https://img.shields.io/github/size/riadloc/vue-scrollspy/lib/scrollspy.js.svg?style=popout-square)](https://github.com/Riadloc/vue-scrollspy/blob/master/dist/scrollspy.js)
[![Licence](https://img.shields.io/github/license/riadloc/vue-scrollspy.svg?style=popout-square)](https://github.com/Riadloc/vue-scrollspy)
## Description

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

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

[Demo](https://riadloc.github.io/vue-scrollspy)

## Installation
```console
npm install vue-use-scrollspy --save
```
## Usage
```javascript
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
```html
<div>
  <nav>
    <scroll-spy
      :items="['#selection-1', '#selection-2', '#selection-3']"
      class="scroll-spy"
      tag="ul"
      current-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](https://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/vue-use-scrollspy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._