# vue-scrollbox

> A Vue.js (v2.x+) component to provide scroll and observe resize.

Latest version **1.0.1** (published 2018-02-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-scrollbox
pnpm add vue-scrollbox
yarn add vue-scrollbox
bun add vue-scrollbox
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-02-22 |
| First published | 2018-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | John White |
| Maintainers | john-white-92 |

## Links

- npm: https://www.npmjs.com/package/vue-scrollbox
- Repository: https://github.com/john-white-92/vue-scrollbox
- Homepage: https://github.com/john-white-92/vue-scrollbox#readme
- Issues: https://github.com/john-white-92/vue-scrollbox/issues
- npm.io page: https://npm.io/package/vue-scrollbox

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.4

## Recent versions

- 1.0.1 (latest) — 2018-02-22

## README

# vue-scrollbox

A Vue.js (v2.x+) component to provide scroll and observe resize.

# Installation
## NPM

 `$ npm install vue-scrollbox  --save`

import the script:

   import VueScrollbox from 'vue-scrollbox';

## Script tag
Grab the minified version under `dist/vue-scrollbox.min.js`
It will export a global `VueScrollbox` variable.

# Usage
## Register the component globally or locally:
```js
Vue.component('vue-scrollbox', VueScrollbox);
```
OR
```js
...
components: {
  VueScrollbox
}
...
```
## HTML
```vue
<vue-scrollbox mode="vertical" @scroll="onScroll" @resize="onResize">
  <h1>TEST</h1>
  <h1>TEST</h1>
  <h1>TEST</h1>
  <h1>TEST</h1>
</vue-scrollbox>
```
## Props
| Name | Type | Description |
| --- | --- | --- |
| `mode` | `String` | Select one of the options: `vertical`, `horizontal`, `auto`. **default: vertical** |
| `width` | `Number` | Fix canvas width. |
| `height` | `Number` | Fix canvas height. |

## Events
When the user scrolls contents `scroll` event will be dispatched.
When viewport or canvas changed size `resize` event will be dispatched.
```vue
...
methods: {
  onScroll (offset) {
    console.log('onScroll', offset)
  },
  onResize (viewport, canvas) {
    console.log('onResize', viewport, canvas)
  }
}
...
```

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