vue-sticky-bottom-scroll

a vue.js directive that keeps an element scrolled to the bottom

vue-sticky-bottom-scroll keeps an eye on your element and whenever content is added inside of it, it scrolls down so that the viewer can remain focused on the newest content!

install / include

NPM:

npm i --save vue-sticky-bottom-scroll

Require it in your vue.js component file:

// ES5
var stickyScroll = require('vue-sticky-bottom-scroll');
// ES6
import 'vue-sticky-bottom-scroll';

CDN:

Include it in your main html file:

<script src='https://cdn.rawgit.com/theomessin/vue-sticky-bottom-scroll/master/stickyScroll.js'></script>

usage instructions

Add v-sticky-scroll as an attribute on the element you wish to always scroll to the bottom of:

<div class='i-wish-this-would-scroll' v-sticky-scroll></div>

options: animate

the scrolling will jump to the bottom by default.
if you prefer a smooth scroll, add:

argument 'animate'
optional: expression (default is 300)

<div class='i-wish-this-would-scroll' v-sticky-scroll:animate></div>

<div class='i-wish-this-would-scroll' v-sticky-scroll:animate=500></div>

how it works

vue-sticky-bottom-scroll uses a wonderful, highly underrated browser feature: mutation observers. By creating a new MutationObserver and telling it which events to .observe(), you can do wonderful things!
This method is much simpler than some implementations of sticky scrolling that use requestAnimationFrame.

license

WTFPL

pongoman / vue-sticky-bottom-scroll