Maintain Scroll Position on Postback Without using "maintainScrollPositionOnPostback"

I found an interesting problem a few days ago while testing a Web application I was working on, to see how it performed in other browsers. One of the pages in the application is loaded dynamically and usually has so much data, that it requires the user to scroll to see some of it. The user is then able to click on an item, and information is loaded via post back. So that the user didn't have to scroll back to the item they had selected, I had used the 'MaintainScrollPositionOnPostBack' attribute in the page directive.

1 <%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" MaintainScrollPositionOnPostback="true" Inherits="_Default" %>

Using this attribute worked great in Internet Explorer 6 and 8, Firefox, and Opera. It was only when I started testing in Chrome and Safari that I had problems. For some reason, neither of them would even recognize the fact that the window had been scrolled, so I had to come up with another solution for them.

After reworking the solution to my problem, I was able to completely remove the 'MaintainScrollPositionOnPostBack' attribute and still have the page scroll to the same position it was in before the user clicked on the control. This turned out to be a good thing, because the 'MaintainScrollPositionOnPostBack' attribute interfered with functionality I added to the application later.

So the first thing I did was to remove the 'MaintainScrollPositionOnPostBack' property from the page directive.

1 <%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

Next, in the form tag, I added an 'onmousedown' eventhandler.

16 <form id="form1" runat="server" onmousedown="findScrollPosition(event);">

Then in my JavaScript file, I find the scroll position when the mouse button was pushed.
The variables mouseX and mouseY represent the horizontal and vertical coordinates of the pointer relative to the window, when the mouse button was pushed.

As I said before, Chrome and Safari would not return the scroll properties properly, so I had to find another way to get the scroll value for those browsers. It just so happens, that I have had problems with those two browsers before, so I singled them out using their 'appVersion' property.

To calculate the scroll value for these two browsers, I found the x and y coordinates of the pointer relative to the whole document, by using the 'event.pageX' and 'event.pageY' properties.

To calculate the amount the document was scrolled, I subtracted the mouseX/Y values from the pageX/Y values.

For the other browsers, I just used the document's 'scrollLeft' and 'scrollTop' properties to retrieve the values.

   44 function findScrollPosition(e)

   45 {

   46     var scrolledX;

   47     var scrolledY;

   48     var mouseX;

   49     var mouseY;

   50 

   51     mouseX = e.clientX;

   52     mouseY = e.clientY;

   53 

   54     if(version.match("AppleWebKit"))

   55     {

   56         var xWebkit = event.pageX;

   57         var yWebkit = event.pageY;

   58         scrolledX = xWebkit - mouseX;

   59         scrolledY = yWebkit - mouseY;

   60     }

   61     else

   62     {

   63         scrolledX = document.documentElement.scrollLeft;

   64         scrolledY = document.documentElement.scrollTop; 

   65     }

   66 

   67     document.getElementById("scrolledX").value = scrolledX;

   68     document.getElementById("scrolledY").value = scrolledY;

In the aspx file, I had placed two hidden controls to hold the scroll values so that they could be accessed later from the code behind.

   82 <input type="hidden" id="scrolledX" runat="server" />

   83 <input type="hidden" id="scrolledY" runat="server" />

Finally, I added a page pre-render sub to my code behind page, and registered a JavaScript function call to set the scroll location of the window.

    5     Protected Sub PagePreRender(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreRender

    6         ClientScript.RegisterStartupScript(Me.GetType(), "GetScrollBy", "getScrollBy();", True)

    7     End Sub

And here is the JavaScript function that scrolls the window:

   73 function getScrollBy()

   74 {

   75     window.scrollBy(document.getElementById("scrolledX").value, document.getElementById("scrolledY").value);

   76 }

And there you have it! Now, when if I have scrolled my window, and I click on a control, my page will not look like it has moved when it posts back.