[Vuejs]-Auto scroll to bottom of the page using overflow auto

You can use this code which should keep you at the bottom of the div rather than overflow: auto.

var chatWindow = document.getElementById("chat in chats");
    chatWindow.scrollTop = chatWindow.scrollHeight;

  scrollToEnd () {
      var container = this.$el.querySelector('#myDiv')
      container.scrollTop = container.scrollHeight
  }

You want to give your scrolling element an ID so you can select it easily.
Then we want to set the scrollTop value of that object equal to the scrollHeight when the data gets updated. In vue we can do that by calling nextTick() after the data gets updated.

Howerver, when we only do this the chat will keep scrolling down on each new message, this is usually not what you want, because this means that when your user scrolls up, the chat keeps scrolling back down with each new message. In order to let the chat only scroll down when we’re already scrolled to the bottom we can check if the user has scrolled up, and only if that’s not the case, we auto-scroll down. The final code looks like this, you have to do this in the function that updates the data, after the data has been updated.

var chatWindow = document.getElementById('chat-id-here')
var isScrolled = (chatWindow.scrollTop < chatWindow.scrollHeight - chatWindow.offsetHeight - 10)

Vue.nextTick(function () {
  if (!isScrolled) {
    chatWindow.scrollTop = chatWindow.scrollHeight
  }
})

Note that the ‘- 10’ at the ‘isScrolled’ variable, is the amount of pixels the user has to scroll up before we stop autoscrolling, so you can adjust this as you see fit.