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. See demo.
Installation
NPM (recommended)
npm install --save vue-chat-scroll
import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)
Simple Script Tag
Just include dist/vue-chat-scroll.js
after including Vue.
<script src="https://cdn.jsdelivr.net/npm/vue-chat-scroll/dist/vue-chat-scroll.min.js"></script>
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>
#30)
Scroll with dissapearing elements in chat window (seeIf 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">•••</li>
</ul>