Open page already scrolled at bottom (chat app)

So here is what i did regarding the content automatically scrolls down to bottom when you scroll up.

If you log your scrollToBottom function, you could see that the scrollToBottom function exectues several times on page load and even if you stay idle, it will continue to execute, i suspect it has something to do with two-way binding.

So what i did is this:

scroll = true;
scrollToBottom() {
    if(this.scroll) {
        this.content.scrollToBottom(0);
        this.scroll = false;
    }
}

and it will execute once after page load, what if you want it to automatically scroll again? just set scroll = true again whenever you need it.

Paulo Vitor, este seu chat Ć© cĆ³digo aberto? Quero desenvolver algo parecido.

@DanielRP will reply directly to you

How do i add timestamps inside bubbles?

Continuing the discussion from Open page already scrolled at bottom (chat app):

its always scrolling down can you please help me sir

This helped me accomplish what I wanted. However, I have a PopoverController in the header of my chat. On pressing it, it will cause the whole view to re-render and thus call the method to scroll to the bottom of the panel.

I wish to avoid this since if the user has scrolled up a lot searching for something and he decides to use the popover controller, he will have to do all the scrolling again which is annoying and doesnā€™t make sense.

Any help to deal with this situation would be appreciated!

Yeah, but it makes the page be always scrolled, but what can i do if i want to check previous messages? The page keeps scrolling the pageā€¦

Very useful! Thank you.

Thereā€™s a problem with the proposed solution, its true the function is called multiple times and this might have to do indeed with the two way binding. I suppose this could be reduce by the use of trackBy on *ngFor

Despite this as stated on a previous response it could be avoided to continuously scrolling down by defining a flag that will be set to true after the content has been scrolled down, despite this I donā€™t think is a good solution since the function will be called continuously checking for the scrolled flag over and over, not nice.

What I did instead (and itā€™s not ideal) is to wrap all my content onto a container and set it to visibility hidden, so it will occupy the space on the content and after fetching the data and scrolling down making it visible. Like this is ok, the only problem is that for a small fraction of time you see the scroll bar at the side bar as if you see it when you scroll up or down

Thanks! that was I was looking for.

1 Like

The lag when we enter the Page and then Scroll to the Bottom is there and visible, so the Solution from @mhartington is not ideal.

Is there no way to load the Chat already scrolled to bottom?

I implemented a visible block with z-index that overlays content while ngFor is rendering items.