Question

我正在使用Polymer组件，我在其中有一个聊天框，我在其中加载来自Firebase数据库的消息。我希望在加载组件时将包含消息的div滚动到底部，以便用户可以看到最新的消息。

但是，我无法在ready()或attached()生命周期方法中滚动到Polymer组件中div的底部。我唯一一次看到滚动正确发生的是当我通过点击我的＆＃34;提交＆＃34;手动触发滚动时。按钮（下面的代码）。

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

HTML

  <!-- CONTAINER TO DISPLAY MESSAGES -->
  <div id="messages_container">
    <template is="dom-repeat" items="{{messages}}" as="message">
          [[message.name]]: [[message.text]]
    </template>
  </div>

  <!-- MESSAGE INPUT -->
  <textarea
    placeholder="Type your message here"
    on-input="_onMessageInput">
  </textarea>
  <paper-button raised id="submit"
    on-tap="_submitMessage">
    Send
  </paper-button>

JS

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
}

我看到只有当我点击提交按钮手动触发_onMessagesChanged时才会发生滚动到最低行为。但是，我没有在组件的初始加载时获得滚动行为。

任何帮助都将不胜感激。

Answer 1

尝试setTimeout()或仅_scrollToBottom()来推迟调用<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^bin/?$ - [G,NC] RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] # Now, rewrite any request to the wrong domain to use www. # [NC] is a case-insensitive match RewriteCond %{HTTP_HOST} !^www\. [NC] RewriteRule .* https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301] </IfModule>。 https://www.polymer-project.org/2.0/docs/upgrade#common-utility-apis

Answer 2

您可以为dom-repeat更改时设置一个侦听器，因此永远不必手动更新它。把它放在你的财产声明之后：

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

在组件准备好的情况下滚动到Polymer中div的底部

2 个答案: