How can I scroll down to bottom of a specific div on page load in a chat conversation using Nuxt.js?

Question

I want scroll down to the last div

<div v-for="(message, message_index) in messageArray" :key="message_index">
    <div class="chatList">       
    </div>
 </div>

Answer 1

I'm assuming you have a chat component where you want to scroll down to the last message on page load.

Although there are many ways to achieve this, I found this is the simplest one. scrollIntoView() inside this.$nextTick(function () {}) gets the job done.

Bind your every div inside the loop with unique id. :id="`m-(some_unique_id)`">

<div v-for="(message, message_index) in messageArray" :key="message_index">
    <div :id="`m-${message.id}`">       
    </div>
</div>

and get the element of the last index of messageArray. And tell the scrollIntoView to scroll down to that div.

script

<script>
  mounted: {
    this.getChatBoxUsersChats();
  },
  
  methods: {
    getChatBoxUsersChats() {
      this.$nextTick(function () {
        let length = this.messageArray.length;
          if (length > 0) {
            let id = this.messageArray0[length - 1].id;
            let element = document.getElementById("m-" + id);
            element.scrollIntoView({ behavior: "smooth", block: "end" });
          });
        },
      },
    }
</script>