5,136,034 members and growing! (11,807 online)
Email Password   helpLost your password?
Web Development » Ajax and Atlas » General     Intermediate License: The Code Project Open License (CPOL)

Persisting the scroll position of a DIV on AJAX postbacks

By perels

This article explains how you can persist the scroll position of a DIV in AJAX postbacks.
JScript, Ajax, ASP.NET, Dev

Posted: 18 Mar 2008
Updated: 18 Mar 2008
Views: 3,335
Announcements



Search    
Advanced Search
Sitemap
2 votes for this Article.
Popularity: 1.10 Rating: 3.67 out of 5
0 votes, 0.0%
1
0 votes, 0.0%
2
1 vote, 50.0%
3
0 votes, 0.0%
4
1 vote, 50.0%
5

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 :-)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

perels



Location: Denmark Denmark

Other popular Ajax and Atlas articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 2 of 2 (Total in Forum: 2) (Refresh)FirstPrevNext
Subject  Author Date 
GeneralGreatmembermerlin9816:36 19 Mar '08  
GeneralRe: Greatmemberperels8:03 19 Mar '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 18 Mar 2008
Editor: Smitha Vijayan
Copyright 2008 by perels
Everything else Copyright © CodeProject, 1999-2008
Web11 | Advertise on the Code Project