ember.js 路线刷新后滚动到聊天框底部

Question

我正在构建一个 ember 应用程序，其中包含消息等电子邮件。

当用户发送消息时，容器应该滚动到底部以显示新消息。这是创建新消息的操作

  createMessage(messageParams) {
    this.get('store').createRecord('message', messageParams).save()
    .then(() => {
      return this.refresh()
    })
    .then(() => {
        let objDiv = document.getElementById("message-container");
        objDiv.scrollTop = objDiv.scrollHeight;
    })
    .catch(() => {
      this.get('flashMessages')
        .danger('There was a problem. Please try again.');
    });

截至目前，当新消息出现在容器中时，聊天框不会滚动到底部。当我在设定的超时时间内将代码包装在第二个 .then 中时，它会起作用。

我应该把将容器滚动到底部的代码放在路由文件的其他地方吗？我试着把它放在 afterModel 钩子里。我还尝试将它放在模型挂钩之后的 .then 中。当我这样做时，我在应用程序中导航到路线时得到一个空白页面。

model(params) {
    return Ember.RSVP.hash({
      messages: this.get('store').query('message', {
        id: params.conversation_id
      }),
      conversation: this.get('store').find('conversation', params.conversation_id)
    }).then(() => {
      let objDiv = document.getElementById("message-container");
      objDiv.scrollTop = objDiv.scrollHeight;
    });
  }

Answer 1

在 didTransition 钩子中，您可以运行 DOM 代码在运行循环 afterRender 队列中。

didTransition() {
  Ember.run.later('afterRender', () => {
    let objDiv = document.getElementById("message-container");
    objDiv.scrollTop = objDiv.scrollHeight;
  }, 100);
  return true;
},

DOM 操作代码应该放在组件中，我更喜欢你编写组件来显示消息并利用组件生命周期钩子方法（即，在你的情况下，didRender 最合适）

ember.js 路线刷新后滚动到聊天框底部

ember.js scroll to bottom of chat box after route refresh

javascript

ember.js