Introduction
By default, the scroll position of DIV tags will be reset whenever you do a postback with AJAX. The following code can be used if you're working with AJAX and DIV-tags and you need to persist the scroll position of your DIV tag whenever an AJAX-postback occurs. I used the code in my own project, where I had to have an UpdatePanel and a GridView inside a fixed DIV-tag, while persisting the scroll position on Edit/Cancel/Update commands.
The code has been tested with IE6, IE7, FF 2.0.0.12, and Opera 9.26, and should basically work with any browser supporting the document.getElementById() method.
Background
I recently came across the prescribed problem above. So, I Googled and found an article on CodeProject (Persisting the scroll position of child DIV’s using MS AJAX) - however, the provided solution didn't work for me, so I decided to implement my own solution.
Using the code
Add the following code between your <head></head> or your <body></body> tags:
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
setScrollPos();
}
function saveScrollPos(){
document.getElementById("scrollPos").value =
document.getElementById("divScroll").scrollTop;
}
function setScrollPos(){
document.getElementById("divScroll").scrollTop =
document.getElementById("scrollPos").value;
}
</script>
NB! You might have to change the scrollPos name with the ClientID if your element is encapsulated in another control, MasterPage, UpdatePanel etc. You can get the ClientID like this:
public static string scrollPos = String.Empty;
protected void Page_Load(object sender, EventArgs e){
scrollPos = ((HtmlInputHidden)scrollPos).ClientID.ToString();
}
Then, change the JavaScript to:
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
setScrollPos();
}
function saveScrollPos(){
document.getElementById("<%=scrollPos%>").value =
document.getElementById("divScroll").scrollTop;
}
function setScrollPos(){
document.getElementById("divScroll").scrollTop =
document.getElementById("<%=scrollPos%>").value;
}
</script>
Assuming that you have already added a <asp:ScriptManager> to your page, add the following:
<input type="hidden" id="scrollPos" name="scrollPos" value="0" runat="server"/>
<asp:UpdatePanel runat="server" ID="up1" UpdateMode="always">
<ContentTemplate>
<asp:Button runat="server" ID="button1" text="Post back!" />
<div id="divScroll" onscroll="saveScrollPos();"
style="height: 200px; overflow:auto; overflow-x:hidden; overflow-y:scroll;" >
</div>
</ContentTemplate>
</asp:UpdatePanel>
Points of interest
The trick that made the code work compared to other resources I have looked at was the endRequest - see more here: PageRequestManagerEndRequestEvent.
Updates
- 19-3-2008 - Fixed a couple of typos :-)
