JSFiddle - React, Tailwind, and code Playground

by Jeffery Liang

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-overflow-scroll"></script>
<div id="app">
  <div class="msg-container" v-overflow-scroll="true" scroll-to="last-child">
    <span v-for="(item, index) in msgList" class="msg">{{ item.msg }}</span>
  </div>
</div>

CSS

#app{
  width: 100%;
  height: 200px;
}
.msg-container{
  display:flex;
  flex-direction: column;
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  border:1px solid rgba(0,0,0,.5);
}

.msg{
  width: 100%;
}

JavaScript

new Vue({
	el: '#app',
  directives: {
  	'v-overflow-scroll': VueOverflowScroll
  },
  data () {
  	return {
    	msgList: [{
      	msg: '123'
      }, {
      	msg: '324'
      }]
    }
  },
  created () {
  	setInterval(() => {
    	let number = parseInt((new Date().getTime() % 1000))
      this.msgList.push({
      	msg: number
      })
    } , 1000)
  }
})