Vuejs Doesnot Update Scrolltop

Hi I have created a chat box and wants to scroll to bottom when loaded and when new message is sent. For some reason following is not working

Solution 1:

One of these should work:

// 1mounted() {
    this.$nextTick(() => {
        setTimeout(() => {
            this.$refs.scrollList.scrollTop = this.$refs.scrollList.scrollHeight
        }, 100)
    })

}

// 2mounted() {
    this.$nextTick(() => {
        setTimeout(() => {
            this.$refs.scrollList.scrollTop = 99999
        }, 100)
    })

}

EDIT

Not even sure if setTimeout() is useful. I think the main problem is that .nextTick() expects a function as an argument and you are not giving a function:

from : https://vuejs.org/v2/api/#Vue-nextTick

// modify data
vm.msg = 'Hello'// DOM not updated yetVue.nextTick(function () {
  // DOM updated
})

Share