Javascript 滚动至组件就绪时聚合物中div的底部

我正在研究一种聚合物组件，在其中我有一个聊天盒，可以从Firebase数据库加载消息。我希望在加载组件时将包含消息的

div

滚动到底部，以便用户可以看到最新消息

但是，我无法在

ready（）

或

attached（）

生命周期方法中滚动到聚合物组件的div底部。只有当我点击“提交”按钮（下面的代码）手动触发滚动时，我才能看到滚动正确发生

在我的Polymer 2.0元素中，我的组件中有以下代码：

HTML

我发现只有当我点击submit按钮手动触发

\onMessagesChanged

时，才会出现滚动到底的行为。但是，我并没有得到组件初始加载时的滚动行为

---

任何帮助都将不胜感激。

请尝试

debounce（）

或简单地

setTimeout（）

延迟调用您的

\u scrollToBottom（）

您可以为dom repeat更改时设置侦听器，因此不必手动更新它。将此项放在属性声明之后：

listeners: {'dom-change': '_scrollToBottom'},

ready(){
  super.ready();
  this._scrollToBottom(); //calling from ready or attached does not scroll the div to the bottom  

  //I have also tried Polymer.RenderStatus.afterNextRender(this, () => { this._scrollToBottom(); }); but that does not cause scrolling to occur consistently
}

/**
 * Observer triggered when messages are written to Firebase database
 */
_onMessagesChanged(){ 
  this._scrollToBottom();
}

_scrollToBottom(){
  this.$.messages_container.scrollTop = 
  this.$.messages_container.scrollHeight;
}

_submitMessage(){
  // store message in Firebase database code not shown
  // this triggers onMessagesChanged(), which then correctly scrolls the div to the bottom
}

listeners: {'dom-change': '_scrollToBottom'},