Skip to content

vue.js 1.x directive to always auto-scroll to the bottom of an element!

Notifications You must be signed in to change notification settings

heatherbooker/vue-sticky-scroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 

Repository files navigation

vue-sticky-scroll

update: this directive is for vue 1.x. a vue 2.0 compatible version is available by theomessin here.

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

vue-sticky-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

NPM:
note: vue-sticky-scroll requires vue 1.x; check your version by running npm list vue; a 2.0 compatible version is available here

npm i --save vue-sticky-scroll

Require it in your vue.js component file:

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

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-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

About

vue.js 1.x directive to always auto-scroll to the bottom of an element!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published