0
私はFirebaseデータベースからメッセージをロードするチャットボックスを持っているポリマーコンポーネントに取り組んでいます。私はdivメッセージが含まれているコンポーネントを読み込んで、ユーザーが最新のメッセージを見ることができるように、下部にスクロールしたい。コンポーネントの準備が完了したポリマーのdivの一番下までスクロール
ただし、ready()またはattached()ライフサイクルメソッドのポリマーコンポーネントのdivの下にスクロールできません。スクロールが正しく表示されるのは、「送信」ボタン（下のコード）をタップして手動でスクロールをトリガするときだけです。私のポリマー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をトリガーするとしかし、コンポーネントの初期ロード時にスクロール動作が得られません。
ご協力いただければ幸いです。
'debounce（）'が働いています。ありがとう！ – Vinnie