v-sticky-scroll

vue.js: always keep element scrolled to bottom

by heatherbooker

HTML

<script src='https://npmcdn.com/vue/dist/vue.js'></script>
<script src='https://cdn.rawgit.com/heatherbooker/vue-sticky-scroll/master/stickyScroll.js'></script>
<div id="app">
</div>

CSS

#app {
  padding: 10px;
}
.i-wish-this-would-scroll {
  height: 100px;
  width: 100px;
  overflow: auto;
  border: 1px solid grey;
  margin-top: 10px;
  padding: 5px;
}

JavaScript

new Vue({
	el: '#app',
  template: `
  	<div>
    	<p> as you add numbers (ie content) to the containing div, you can see sticky-scroll continuously scrolls down to the bottom </p>
      <button @click="addNum">add number</button>
      <div class='i-wish-this-would-scroll' v-sticky-scroll>
        <div v-for="num in numbers">
          {{num}}
        </div>
      </div>
    </div>
  `,
  data: {
    numbers: [0]
  },
  methods: {
  	addNum: function() {
    	this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
    }
  }
});