Automatic scroll-down directive for VueJs
Install the project locally using your favourite package manager.
npm install @codekraft-studio/vue-autoscroll
Register the plugin in your Vue application.
import Vue from 'vue'
import VueAutoscroll from '@codekraft-studio/vue-autoscroll'
Vue.use(VueAutoscroll)Than place the directive on the container you want to scroll automatically.
<ul class="messages-container" v-autoscroll>
<li v-for="message in messages" v-text="message" class="message"></li>
</ul>You can also use custom scroll settings.
<ul class="messages-container" v-autoscroll="{ smooth: false, always: true }">
<li v-for="message in messages" v-text="message" class="message"></li>
</ul>If you have a complicate html structure and you need to watch also for grandchildrens and more, you can use the deep modifier.
<div v-autoscroll.deep>
<div v-for="(entries, key) in groupedEntries">
<div>{{key}}</div>
<div v-for="entry in entries">{{entry}}</div>
</div>
</div>Released with MIT License © codekraft-studio