polymer-2.xpolymerfire

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.


Solution

  • 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.