29
Views
4
Comments
How to retain scroll position while navigating back
Question
Application Type
Reactive
Service Studio Version
11.10.0 (Build 34711)

Hi there,

I have a listing screen as shown in the below screenshot. It is using the List widget. When I click on the one of the items,  it will navigate me to the detail page and when I click back button in the detail page, it navigates back to the listing screen but the scroll is always at the top and not from the item I had navigated. However, this works as expected by going back to the exact scroll position in my personal environment but not in my work environment. 

Also I have set previous screen and reverse transition in both the environments. Service studio version is same for both my personal and work environment.

I would highly appreciate if someone could give a solution at the earliest. Thanks!!

Rank: #68

Hello Diyab, 

Check the MaintainScrollPositionOnPostBack property setting of the pages in the application in your work environment.

To work it must be set to MaintainScrollPositionOnPostBack = true


There are three ways of applying the property to a web page.

You can set it programmatically

Page.MaintainScrollPositionOnPostBack = true;

In the page declaration

<%@ Page MaintainScrollPositionOnPostback="true" %>

Or in the web.config´s <system.web> section.

<pages maintainScrollPositionOnPostBack="true" />




Rank: #514

Dear Diyab,


Another solution would be setting the clicked rownumber in a client variable and use something similar to this in the onrender of the screen


setTimeout(function(){

    var elem = document.querySelector("tr:nth-child("+ $parameters.Rownumber+")");

    if ( elem !== null ) {test.scrollIntoView({behavior: "smooth"});} 

    }, 500);


The timeout function is needed since react can take sometime to render.

The rownumber parameter is the one you want to scroll to.

I use something like this in one of my applications.


Kind regards,

Alexander