滚动到 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 更新。每当观察到数据更改时，它将打开一个队列并缓冲同一事件循环中发生的所有数据更改。如果同一个 watcher 被多次触发，它只会被推入队列一次。这种缓冲的重复数据删除对于避免不必要的计算和 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"})
});