1

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.

François Perret
  • 143
  • 1
  • 5

1 Answers1

2

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.

Ofisora
  • 2,707
  • 2
  • 14
  • 23
  • Your Plunkr works great. Thanks! I have a question, though : paper-dialog-scrollable should be inside a Polymer.PaperDialogBehavior implementing element, according tot the [docs](https://github.com/PolymerElements/paper-dialog-scrollable). Am I missing something here ? – François Perret Aug 20 '17 at 10:23
  • In addition, for this to work in a dynamic data feeding of the scrolling element (firebase in my case), I had to wait until next render once the array mutation callback is triggered : `Polymer.RenderStatus.afterNextRender(this, () => { this.$.scrolly.$.scrollable.scrollTop = this.$.scrolly.$.scrollable.scrollHeight; });` – François Perret Aug 20 '17 at 16:24
  • To be thorough, Polymer.RenderStatus.afterNextRender can be replaced by forcing the render of the dom-repeat element bound to firebase result array. Anyway, IMO, paper-dialog-scrollable should automagically scroll to last, or propose a way to make it happen, instead of forcing us to access and set sub-properties... – François Perret Aug 20 '17 at 20:17
  • 1
    `PaperDialogBehavior` makes an element a material design dialog. So, if you want material design you can implement that. – Ofisora Aug 20 '17 at 22:56