Scroll Down - Chat
Application Type
Reactive

Hi buddies,


I hope you're doing well.


I'm developing a chat.

So, when the user writes a new message I want to scroll down automatically to the last message.



I used this script - $actions.ScrollToElement($parameters.WidgetId);  - but this script does scroll to the first message. (Client action - AdjustScroll)


Can you help me please?


Thank you,

FC

Hello @Fábio Miguel Ferreira Coelho,

The the awser from @Harika Ramadalai is almost right. 

Just need to change the JS to this:

var objDiv = document.getElementById($parameters.elementId);

objDiv.scrollTo(0,objDiv.scrollHeight);

Also instead of refer to the container by a class is better by an ID. After and this JS, you need to add an input parameter and also link that input to the ID of the container. See this images:

I try to add the OML, but I don't know why, now it have 7Mb and OS have a limitation of 4Mb. You can download from here:

https://1drv.ms/u/s!AkWQrO3B6Nz8ghGuVIXvOr9nxfvG

Hope it helps.

Nuno R

Hi @Fábio Miguel Ferreira Coelho ,

You need to change the order of this events:

On the "SendMessage_OnClick" action.

Hope it helps,

Nuno R 

Hello @Fábio Miguel Ferreira Coelho

Can you share the OML?

Is better to help you on solving the issue.

Best Regards,

NunoR

Hello Nuno,


Thank you for your message.


I'll send you the oml file, but I need some days because I need to isolate the chat part.


Thank you,

FC

Hello Fábio,

Is the solution from @Harika Ramadalai works it´ s perfect.

If not try to send the OML that me and other users can help better.

Best Regards,

Nuno R

Hi Nuno,


I tried the solution of @Harika Ramadalai, but not works and I don't know why.

I send you the OML.


I hope you can figured out.


Thank you,

FC

Chat.oml

Hello @Fábio Miguel Ferreira Coelho,

The the awser from @Harika Ramadalai is almost right. 

Just need to change the JS to this:

var objDiv = document.getElementById($parameters.elementId);

objDiv.scrollTo(0,objDiv.scrollHeight);

Also instead of refer to the container by a class is better by an ID. After and this JS, you need to add an input parameter and also link that input to the ID of the container. See this images:

I try to add the OML, but I don't know why, now it have 7Mb and OS have a limitation of 4Mb. You can download from here:

https://1drv.ms/u/s!AkWQrO3B6Nz8ghGuVIXvOr9nxfvG

Hope it helps.

Nuno R

Hi Nuno,


Thank you for your fast answer.


I did what you told me.

Now when I write a new message the Scroll Down works, but it goes to the penultimate message instead of goes to the last message.

Do you know why?


Thank you so much for your help!!


Kind regards,

FC

Hi @Fábio Miguel Ferreira Coelho ,

You need to change the order of this events:

On the "SendMessage_OnClick" action.

Hope it helps,

Nuno R 

Nuno,


Thank you for your effort.


Works perfectly!

It's solved.


Kind regards,

FC

Hi Fábio Miguel Ferreira Coelho ,

Use the below JS to scroll to bottom of the list. .wrapper is class name. 

//CSS styles Height of container
.wrapper {
    height: 500px;
    overflow-y: scroll;
}
// JS to scroll to the bottom of the list
var objDiv = document.querySelector('.wrapper');
objDiv.scrollTop = objDiv.scrollHeight;

Hope this helps you.

Regards,

Harika



Hi Harika,


I tried your solution, but not works and I don't know why.

I send you the OML if you want to check it out.


Thank you for your help.


Thank you,

FC

Chat.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.