JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
<div id="app">
  <!--{{msg}}-->
  <button @click="counter=[]">
  restart
  </button>
  <dynamic-updates :counter="counter"></dynamic-updates>
</div>

CSS

.dynamic-container {
  width: 500px;
  height: 300px;
  overflow-y: scroll
}

JavaScript

Vue.directive('scroller', {
 	bind: function(el, bindings, vnode) {
  	this.manualScroll = false;
  },
  componentUpdated: function(el, bindings, vnode) {
    console.log('updated', el.scrollHeight - el.scrollTop, $(el).outerHeight())
    if (el.scrollHeight - el.scrollTop >= el.clientHeight) { 
      // scroll to bottom
      if (!this.manualScroll) {
      	el.scrollTop = el.scrollHeight - el.clientHeight; // triggers scroll event
      }
    }
  },
  inserted: function(el) {
  	el.scrollTop = el.scrollHeight - el.clientHeight;
    // console.log(el.scrollHeight)
    var self = this;
    el.addEventListener('scroll', function(evt) {
    	console.log('evt', el.scrollTop);
      self.manualScroll = (el.scrollTop < el.scrollHeight - el.clientHeight - 50);
      console.log('manual scroll', self.manualScroll)
    })
  }
});

Vue.component('DynamicUpdates', {
	template: '<div class="dynamic-container" v-scroller><ul><li v-for="count in counter">{{count}}</li></ul></div>',
  props: {
  	counter: Array
  },
	data: function() {
    return {
      updateInterval: null
    };
  },
  computed: {
  	count: function() { return this.counter.length; }
  },
	mounted: function() {
  	this.updateInterval = setInterval(this.update, 200);
  },
  methods: {
  	update: function() {
    	this.counter.push(this.count++);
    }
  },
  beforeDestroy () {
    clearInterval(this.updateInterval);
  }
})

new Vue({
	el: '#app',
  data: {
  	counter: [],
  	msg: 'hello world'
  }
})