Scroll to the desired position

[arreumb]

Hi, after deep-chat is pre-populated using initialMessages[] it shows the end of the conversation; is there a way to populate it but make it show the beginning of the conversation without using unnecessary animations? It would be really needed in mail-client-like applications.

Thanks

[OvidijusParsiunas]

Hi @arreumb, If you want to scroll the chat to a particular location once it has been rendered, you can do so by listening to the onComponentRender event, find the element that has the scrollbar (it currently has an id of messages) and set the scrollTop property to the height that you want. E.g:

chatElementRef.onComponentRender = (ref) => {
  setTimeout(() => {
    ref.shadowRoot.getElementById('messages').scrollTop = 0;
  });
};

The reason why we use a setTimeout here is because the messages are not populated when onComponentRender is triggered, hence we should scroll after they are populated.

[arreumb]

Thanks. Without onComponentRender I wasn't able to hide the messages before to scroll top. Hiding the messages inside the event before the setTimeout was the right solution.