# vue-chat-scroll-top-scroll

> Automatic, yet conditional, scroll-to-bottom directive for Vue.js 2.0 with emit scroll-top event when scroll to the top.

Latest version **1.0.3** (published 2017-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-chat-scroll-top-scroll
pnpm add vue-chat-scroll-top-scroll
yarn add vue-chat-scroll-top-scroll
bun add vue-chat-scroll-top-scroll
```

## 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.3 |
| Published | 2017-11-10 |
| First published | 2017-10-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | YJ Cheng |
| Maintainers | yuanchieh |
| Keywords | vue, vue-directive, scroll, autoscroll, chat, room, top-load |

## Links

- npm: https://www.npmjs.com/package/vue-chat-scroll-top-scroll
- Repository: https://github.com/sj82516/vue-chat-scroll-top-load
- Homepage: https://github.com/sj82516/vue-chat-scroll-top-load#readme
- Issues: https://github.com/sj82516/vue-chat-scroll-top-load/issues
- npm.io page: https://npm.io/package/vue-chat-scroll-top-scroll

## Recent versions

- 1.0.3 (latest) — 2017-11-10
- 1.0.2 — 2017-11-10
- 1.0.1 — 2017-11-08
- 1.0.0 — 2017-10-27

## README

# vue-chat-scroll-top-load

Forked from [theomessin/vue-chat-scroll](https://github.com/theomessin/vue-chat-scroll)
Added new feature when scroll to the top of element , element would emits "scroll-top" event.

## Installation

- #### NPM / Yarn
  Run `npm install --save vue-chat-scroll-top-load`, or `yarn add vue-chat-scroll-top-load`

- #### With Modules

  ``` js
  // ES6
  import Vue from 'vue'
  import VueChatScroll from 'vue-chat-scroll-top-load'
  Vue.use(VueChatScroll)

  // ES5
  var Vue = require('vue')
  Vue.use(require('vue-chat-scroll-top-load'))
  ```

- #### `<script>` Include

  Just include `./dist/vue-chat-scroll-top-load.js` after Vue itself.

## Usage

There's nothing you need to do in JavaScript except for installation. To use the plugin, simply use the `v-chat-scroll` directive.

``` html
<ul class="messages" v-chat-scroll @scroll-top="loadNewData()">
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>
```

Checkout demo on jsfiddle: https://jsfiddle.net/sj82516/780eg0ek/  

#### Prevent scroll down when user has scrolled up

Alternatively, you can pass a config value to the directive:

``` html
<ul class="messages" v-chat-scroll="{always: false}">
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>
```

## License

[MIT](http://opensource.org/licenses/MIT)

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