How to automatically scroll down a block?

Question

Vue.js

There is a block

<div class="oldComments mb-3" ref="oldComments">
            <ul class="commentList">
                <li v-for="(comment,i) in history" :key="i" class="comment">
                    <span class="date">Сообщение от: {{comment.date}}</span><br>
                    <span class="name">{{comment.name}}: </span>
                    <span>{{comment.text}}</span>
                    <hr>
                </li>
            </ul>
        </div>

Mounted hook is loading comments

axios
                .get(url)
                .then(function (response) {
                    if (response.data.status){
                        that.history = response.data.result
                        that.scrollToEnd()
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })

After loading the scrollToEnd() method, I want to scroll the block down, the method itself

scrollToEnd: function() {    
            let messageDisplay = this.$refs.oldComments;
            this.$refs.oldComments.scrollTop = messageDisplay.scrollHeight;
        }

but the block does not scroll. When I add a new value to the existing ones, the block scrolls, but not to the last value, but to the penultimate one. what could be the problem?

Answer 1

that.history = response.data.result
that.scrollToEnd()

No, this won't work - at the time scrollToEnd is called, there is nothing to scroll, the DOM has not yet been updated. Wrap the call to scrollToEnd in nextTick .