Vue.jsでスクロール下固定

## 通常時(vue未使用)スクロール下固定

<div class="box">
 // content
</div>

<script>
var obj = document.querySelector('.box');
obj.scrollTop = obj.scrollHeight;
</script>

## jQueryでアニメーションでスクロールを下に移動

<div class="box">
 // content
</div>

<script>
$(function(){
   $('.box').delay(100).animate({
     scrollTop: $(document).height()
  }, 1000);
});
</script>

## vue.js使用時
– this.$nextTickを使用
– updatedのコールバックで読み込む

<div id="box">
   <div v-for="m in messages">
   // content
   </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
  message: '',
  messages: []
  },
  methods: {
    // 省略
    scrollToEnd(){
      this.$nextTick(() => {
        const chatLog = document.getElementById('box');
        if (!chatLog) return
        chatLog.scrollTop = chatLog.scrollHeight
        })
    },
　mounted(){
    // 省略
  },
  updated(){
    this.scrollToEnd();
  },

スクロール領域はdivタグで囲っているから、obj.scrollTop = obj.scrollHeight;のままでいけるかと勘違いして少し嵌りました。