Nuxt. js Прокрутка элемента div вниз

Question

Что не так с этим кодом? После рендеринга прокрутка элемента div должна быть внизу элемента div. scrollTop не сохраняет значение после развлечения c

<main>
<div v-if="messages">
   <ul ref="messagesContainer">
       <li v-for="message in messages" :key="`${message.text}.${message.username}`">
         <Message :message="message" :username="username" />
       </li>
   </ul>
</div>
</main>

 mounted() {
    this.scrollToEnd();
  },
  methods: {
    scrollToEnd() {
      const height = this.$refs.messagesContainer.scrollHeight;
      this.$refs.messagesContainer.scrollTo(0,height)
      // doesnt work 
      // this.$refs.messagesContainer.scrollTop = height
    }
  }

 main {
    background-color: #fff;
    height: 56vh;
    ul {
      height: 100%;
      overflow: auto;
      flex: auto;
    }
  }

Answer 1

<main>
   <ul v-if="messages" id="messagesContainer">
      <li v-for="message in messages" :key="`${message.text}.${message.username}`">
        <Message :message="message" :username="username" />
      </li>
   </ul>
</main>


scrollToEnd() {
  const element = document.getElementById('messagesContainer')
  element.scrollTop = element.offsetHeight + element.scrollHeight
}

Answer 2

вы можете получить позицию y элемента через свойство offsetHeight следующим образом: var offsetTop = this.$refs.messagesContainer.offsetHeight;

Вы можете найти дополнительную информацию о свойствах offsetHeight, clientHeight и scrollHeight здесь

Обратите внимание, что вам нужно вызвать метод scrollTo для элемента window:

пример:

methods: {
    scrollToEnd() {
      var scrollHeight = this.$refs.messagesContainer.offsetHeight;
      this.$refs.messagesContainer.scrollTop = scrollHeight;
    }
  }

Надеюсь, это поможет :)