JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<!DOCTYPE html>
<html>
  <head>
     <title>Example</title>
  </head>
  <body>
  
    <div id="app">
      <div class="scrolled-div">
        <div v-for="el in elements">
          {{ el }}
        </div>
     </div>   
        <button v-on:click="fetchElements()">Fetch elements</button>
        <button v-on:click="scrollDown()">Scroll down</button>
      
    </div>
  
  </body>

</html>

CSS

.scrolled-div {
  width: 300px;
  height: 50px;
  overflow: scroll;
  background: #c2c2c2;
  border: solid 1px black;
}

JavaScript

let i = 100000;
var vm = new Vue({
  name: "FooComponent",
  el: "#app",
  data: function() {
    return {
      elements: []
    };
  },
  methods: {
    fetchElements: function() {
      this.elements = [++i, ++i, ++i, ++i];
      Vue.nextTick(() => {
        this.scrollDown()
      });
    },
    scrollDown: function() {
      var el = this.$el.querySelector(".scrolled-div");
      el.scrollTop = el.scrollHeight - el.clientHeight;
    }
  }
});