CODEWITHSUNDEEP
polymer-2.xpolymerfire
François Perret
François Perret

Reputation: 143

Instruct paper-dialog-scrollable to scroll to bottom

I have a paper-dialog-scrollable which is filled with a dom-repeat from a firebase-query. Everything works fine, except paper-dialog-scrollable doesn't scroll to the bottom when firebase adds an entry to the array. I managed to set a callback whenever the array gets a new entry (basically with an observer on the spliced array, not on the array). So how do I instruct paper-dialog-scrollable to scroll to bottom from that callback ? I saw solutions here which don't seem to work. Thanks for any insight.

Upvotes: 1

Views: 371

Answers (1)

Ofisora
Ofisora

Reputation: 2737

As suggested in the link you provided, give the paper-dialog-scrollable some id (e.g pds) and then add the following code:

this.$.pds.$.scrollable.scrollTop = this.$.pds.$.scrollable.scrollHeight;

An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0. Learn more about scrollTop.

The element's scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow. Learn more about scrollHeight.

I have made a demo here: https://plnkr.co/edit/JIZEdd6NoBBnwndbQuFA?p=preview.

Upvotes: 2

Related Questions