Прокрутка к нижней части div не работает

Question

Я пытаюсь прокрутить div в нижнюю часть, когда какая-то кнопка нажата (контекст чата), но она не работает должным образом

В этом чате мне нужно показать сообщение вверху при запускеи когда я получаю больше контента, автоматически прокручиваю вниз, показывая самые последние сообщения, я уже пробовал scrollIntoView, как показано в следующем коде:

      const element = this.$el.querySelector(".chat-box");
      element.scrollIntoView({behavior: "smooth", block: "end"})
    }

Я ожидаю прокрутить до конца div,но на самом деле прокручивая близко к основанию, пропуская некоторый контент. Только scrollIntoView фактически переместил свиток, я попробовал element.scrollTop = element.scrollHeigh и ничего не происходит

Answer 1

Я предполагаю, что вы отправляете новое сообщение в том же обратном вызове, что и вызов scrollInToView?

Вот что, по-вашему, вы делаете:

this.messages.push(newMessage);
const element = this.$el.querySelector(".chat-box");
element.scrollIntoView({behavior: "smooth", block: "end"})

Цитата из Vue.js docs :

Если вы еще не заметили, Vue выполняет обновления DOM асинхронно. Всякий раз, когда наблюдается изменение данных, он открывает очередь и буферизирует все изменения данных, которые происходят в одном и том же цикле событий. Если один и тот же наблюдатель запускается несколько раз, он будет помещен в очередь только один раз. Эта буферизованная дедупликация важна для избежания ненужных вычислений и манипуляций с DOM. Затем в следующем цикле событий «tick» Vue сбрасывает очередь и выполняет фактическую (уже очищенную) работу.

Это означает, что вам нужно дождаться следующего тика, прежде чем пытатьсячтобы перейти к последнему элементу, должно получиться что-то вроде этого:

this.messages.push(newMessage);

// wait until the new message is rendered
this.$nextTick(() => {
  // then scroll
  const element = this.$el.querySelector(".chat-box");
  element.scrollIntoView({behavior: "smooth", block: "end"})
});