How to scroll bottom of div at launch?

March 30, 2023

I need to create a chat for my application, and to show the last messages when going on the chat page, I need to scroll automatically at the bottom of the div.

VueJs :

<template>
    <div id="app">
        <div class="comments" v-chat-scroll>
            <div v-for="comment in comments">
                //What defines the comment
            </div>
        </div>
    </div>
</template>

CSS :

.comments {
    margin: 2.5rem auto 0;
    max-width: 60.75rem;
    padding: 0 1.25rem;
    height: 300px;
    overflow-y: scroll;
}

Typescript :

export default {

    mounted() {
        this.scrollToEnd();
    },

    methods: {

        scrollToEnd() {
            var container = this.$el.querySelector(".comments");
            var scrollHeight = container.scrollHeight;
            container.scrollTop = scrollHeight;
        },
    }
}

I tried to use scrollTop by giving the scrollHeight of the div with the scroll.
scrollHeight get the good value (in this case 300), but scrollTop stays at 0.

Hope someone can help.
Thanks in advance !

>Solution :

Your code works for me as is, without the v-chat-scroll:

new Vue({
  el: '#app',
  data: {
    comments: Array.from({
      length: 50
    }, (_, i) => 'Comment ' + i).concat(['last comment - scroll here'])
  },
  mounted() {
    this.scrollToEnd();
  },

  methods: {

    scrollToEnd() {
      var container = this.$el.querySelector(".comments");
      var scrollHeight = container.scrollHeight;
      container.scrollTop = scrollHeight;
    },
  }
})

.comments {
  margin: 2.5rem auto 0;
  max-width: 60.75rem;
  padding: 0 1.25rem;
  height: 100px;
  overflow-y: scroll;
  border: 1px solid grey;
}

.comment {
  padding: 4px;
  border-top: 1px dotted grey;
}

<div id="app">
  <div class="comments">
    <div v-for="comment in comments">
      <div class="comment">{{comment}}</div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

Also, the v-chat-scroll directive does the same thing, it works for me too:

new Vue({
  el: '#app',
  data:{
    comments: Array.from({length: 50}, (_,i) => 'Comment '+i).concat(['last comment - scroll here'])
  },
})

.comments {
  margin: 2.5rem auto 0;
  max-width: 60.75rem;
  padding: 0 1.25rem;
  height: 100px;
  overflow-y: scroll;
  border: 1px solid grey;
}

.comment{
  padding: 4px;
  border-top: 1px dotted grey;
}

<div id="app">
  <div class="comments" v-chat-scroll>
    <div v-for="comment in comments">
      <div class="comment">{{comment}}</div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-chat-scroll/dist/vue-chat-scroll.min.js"></script>