alexandru-dodon / vue-chat-scroll

Automatic scroll-to-bottom directive for Vue.js 2.0

vue-chat-scroll

A plugin for Vue.js 2 that scrolls to the bottom of an element when new content is added within said element.

Installation

• NPM / Yarn

  Run npm install --save vue-chat-scroll, or yarn add vue-chat-scroll

• With Modules

  // ES6
  import Vue from 'vue'
  import VueChatScroll from 'vue-chat-scroll'
  Vue.use(VueChatScroll)
  
  // ES5
  var Vue = require('vue')
  Vue.use(require('vue-chat-scroll'))

• Directive Only

  // ES6
  import Vue from 'vue'
  import { vChatScroll } from 'vue-chat-scroll'
  
  Vue.directive('chat-scroll', vChatScroll) // Use it as v-chat-scroll
  
  // You can also use it directly in component object
  const MyComponent = {
    name: 'MyComponent',
    directives: {
      'chat-scroll': vChatScroll // Use it as v-chat-scroll
    }
  }
  
  // ES5
  var Vue = require('vue')
  Vue.directive('chat-scroll', require('vue-chat-scroll').vChatScroll)

• <script> Include

  Just include ./dist/vue-chat-scroll.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.

<ul class="messages" v-chat-scroll>
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>

Prevent scroll down when user has scrolled up

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

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

License

MIT