[Vuejs]-Why can't I scroll to the bottom of my div?

by

0👍

pass a custom class to your div in your <template> first:

<div :class="`messages`">
</div>

and then get the position of the div as a number:

getPositionOfElement() {
  return (document.getElementsByClassName("messages").getBoundingClientRect().top - window.innerHeight);
}

This would be the method for scrolling to the position where your div is located – adapt it to your needs as described in the official documentation:

smoothScroll(vertPos) {
  window.scrollTo({
    top: vertPos,
    left: 0,
    behavior: 'smooth'
  });
}

combine both methods like this from the place where you need to perform the scrolling – calling this either from another method or directly from the template…

this.smoothScroll(this.getPositionOfElement());

Please let me know if this works for you.

Leave a comment