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操作非常重要。然后，在下一个事件循环“滴答”中，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"})
});

滚动到div的底部不起作用

1 个答案: