Show last record of List Record on Refresh without scrolling bar.

Hi All,

Good Day!

Please help me  to show the last record of the list when the List Record is refreshed without scrolling down the scrollbar.

I have a List Record with style "ChatListRecord" that defines the scroll.


SyntaxEditor Code Snippet 

.ChatListRecord{
    max-height: 500px;
    min-height: 350px;
    overflow-y: scroll;
    padding-right: 6px;    
}

when i refresh the List Record,the first record of the List Record is shown and need to scroll down to view the last record.

Please guide me ti fix it.

Thanks in advance.

Regards,

Neha

Hi Neha,

What kind of solution do you want? Do you want to scroll the screen down automatically?

Hey Neha,


I ran into this same exact issue! You will need to use some javascript to solve this issue though, or.... you can reverse your list where the latest message will be at the top.

For scrolling using javascript here's a snippet: 

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Scrollable elements tend to move the scrollbar to the top automaticaly when they are refreshed, so when the last element is at the top this will do exactly how you'd like.

Kilian Hekhuis wrote:

Hi Neha,

What kind of solution do you want? Do you want to scroll the screen down automatically?

Thanks for the response Mr. Kilan.

I want to scroll down the scrollbar in the list record  automatically.


Joey Moree wrote:

Hey Neha,


I ran into this same exact issue! You will need to use some javascript to solve this issue though, or.... you can reverse your list where the latest message will be at the top.

For scrolling using javascript here's a snippet: 

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Scrollable elements tend to move the scrollbar to the top automaticaly when they are refreshed, so when the last element is at the top this will do exactly how you'd like.

Thanks for the response.

I tried and got an error "An exception occurred in the client script. Error: Cannot read property 'scrollHeight' of null".

I am bad in javascript. Please find below the way i tried it.


Can you guide me what went wrong.

Thank You.

Neha George wrote:

Joey Moree wrote:

Hey Neha,


I ran into this same exact issue! You will need to use some javascript to solve this issue though, or.... you can reverse your list where the latest message will be at the top.

For scrolling using javascript here's a snippet: 

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Scrollable elements tend to move the scrollbar to the top automaticaly when they are refreshed, so when the last element is at the top this will do exactly how you'd like.

Thanks for the response.

I tried and got an error "An exception occurred in the client script. Error: Cannot read property 'scrollHeight' of null".

I am bad in javascript. Please find below the way i tried it.


Can you guide me what went wrong.

Thank You.


Hi Neha George,


You can add a container to the end of the list.

Add javascript function " scrollIntoView()  ", pass container id to the function.

It will scroll down the list, and point to the container, which is just after the last record.


Here is the HTML sample shows how the function is working- 

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_scrollintoview