Skip to content
Automatic scroll-to-bottom directive for vue.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Pretty-fy code before publish Dec 14, 2018
docs Fix HTTPS issue with faker May 27, 2018
src Pretty-fy code before publish Dec 14, 2018
.gitignore Fix cross-browser compatibility issue #32 Dec 8, 2018
license.md
package-lock.json Fix for Issue #30 (#36) Dec 14, 2018
package.json Fix for Issue #30 (#36) Dec 14, 2018
readme.md
rollup.config.js Squash merge #25 by @BenAHammond May 27, 2018

readme.md

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. Check out our lovely demo.

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 & smooth scrolling

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

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

Scroll with dissapearing elements in chat window (see #30)

If you have a "loading" animation that disappears when you receive a message from an external source, use the scrollonremoved option to ensure the scroll will happen after the element has been removed

<ul class="messages" v-chat-scroll="{always: false, smooth: true, scrollonremoved:true}">
  <li class="message" v-for="n in messages">{{ n }}</li>
  <li v-if="loading">&bull;&bull;&bull;</li>
</ul>

License

MIT

You can’t perform that action at this time.