当某些按钮被点击(聊天上下文)时,我试图将div
滚动到其底部,但是它无法正常工作
在此聊天中,我需要在开始时在顶部显示消息,当我获得更多内容时,自动滚动到底部以显示最新消息,我已经尝试过scrollIntoView
,如以下代码所示:>
const element = this.$el.querySelector(".chat-box");
element.scrollIntoView({behavior: "smooth", block: "end"})
}
我希望滚动到div
的末尾,但实际上滚动到底部附近,缺少一些内容。
只有scrollIntoView
实际移动了滚动条,我尝试了element.scrollTop = element.scrollHeigh
却没有任何反应
答案 0 :(得分: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操作非常重要。然后,在下一个事件循环“滴答”中,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"})
});