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

npm install --save vue-chat-scroll

import Vue from 'vue'

import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)

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>

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>

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>

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

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>

If you want to avoid having smooth scroll in this situation (so it instantly scrolls to bottom after loading), but keep it when new messages come, use the smoothonremoved set to false, while being able to keep smooth set to true for later messages.

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

This option only applies if scrollonremoved is set to true. When not defined behavior defaults to smooth property.