Skip to content

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

License

Notifications You must be signed in to change notification settings

BenAHammond/vue-chat-scroll

 
 

Repository files navigation

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'))
  • <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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 50.6%
  • HTML 49.4%