Persisting the scroll position of a DIV on AJAX postbacks

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

Denmark

Member

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Sweet!

Member 2925315

3:01 8 Feb '12

Thank you!
Sign In·View Thread·Permalink

Thanks!!

yonatankr

21:21 16 Aug '09

I've been looking at different solutions for 2 days now !! this is the only one that worked! Thanks a lot !!!
Sign In·View Thread·Permalink

How to reset the scroll positon back to zero?

bentonbenton

13:19 12 May '09

Thank you very much for such a great solution. Best solution I've found for this problem so far.

However I can't seem to find a way to reset the scroll position back to 0. When I change a RadioButtonList selection I want to reset the div scroll position back to 0, so in code behind (in the SelectedIndexChanged event for the RadioButtonList) I do this:

protected void radCategories_SelectedIndexChanged(object sender, EventArgs e)
        {
            ((HtmlInputHidden)scrollPos).Value = "0";
        }

However the scroll position remains the same after the partial postback. Am I following the right approach?

Re: How to reset the scroll positon back to zero?

bentonbenton

13:34 12 May '09

Got it! My code-behind solution for the reset does work if the hidden field is inside the UpdatePanel. Reset won't work if the hidden field is outside the UpdatePanel. Thanks again for your solution.
Sign In·View Thread·Permalink

Re: How to reset the scroll positon back to zero?

perels

13:03 21 Jul '09

Hi bentonbenton, I see you have found the solution - great For others interested, this happens because any data outside the updatepanel will not be updated on the AJAX postback - unless you specify so.
Sign In·View Thread·Permalink

Excellent - Thank you

thelizard

9:52 2 May '09

I searched for hours for a solution to this. This is perfect!
Sign In·View Thread·Permalink

Re: Excellent - Thank you

perels

12:58 21 Jul '09

- Glad it worked
Sign In·View Thread·Permalink

This is fantastic

Sergodtud

10:19 18 Mar '09

Thanks! This worked like a charm. I think a scrolling div/p is a much better way to display data that needs to be processed over paging. It would be fantastic if listviews had a scrolling property like this. Mange Tak!
Sign In·View Thread·Permalink

Re: This is fantastic

perels

12:55 21 Jul '09

Glad it worked Tak for det
Sign In·View Thread·Permalink

Couple tweaks

maxismclaren

12:02 9 Jan '09

Depending on how much scrolling is done for normal navigation/behavior, it might be good to store the element references because the onscroll event fires almost continuously while scrolling. You might want to handle multiple UpdatePanels as well.

If you're mixing in with your markup (like the code above does) it'll look like this:

<script>
var scrollPos = null;
var divScroll = null;
<br>
function scrollInit(shouldReload) {
  if (shouldReload || !scrollPos ) {
    scrollPos = document.getElementById('<%=scrollPos%>');
  }
  if (!divScroll) {
    divScroll = document.getElementById('divScroll');
  }
}
 
function saveScrollPos() {
  scrollPos.value = divScroll.scrollTop;
}
 
function setScrollPos() {
  divScroll.scrollTop = scrollPos.value;
}
 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
 
function endRequestHandler(sender, args) {
  if (args.get_error() == undefined && sender._postBackSettings.panelID == 'up1') {
    scrollInit(true); //Control reference invalid when redrawn
    setScrollPos();
  }
}
 
function init() {
  scrollInit(false);
}
</br></script>
 
...
 
<body  önload="init()">
</body>

Re: Couple tweaks

perels

12:58 21 Jul '09

Hello maxismclaren, I have not tested your code - but seems like a great "upgrade" Thanks for sharing.
Sign In·View Thread·Permalink

Thanks

Saeedses

1:01 30 Jun '08

Many thanks for this... helped alot. I also want to move Scrollbar to the end of Div automatically. e.g. if i am adding lines to DIV and not scrolling manually, scroll bar should be moved to bottom of div. any idea?
Sign In·View Thread·Permalink

Re: Thanks

perels

5:39 11 Jul '08

Hi Saeedses, You could try something like this (have not tested it though): function setScrollPosBottom(){ document.getElementById("divScroll").scrollTop = document.getElementById("divScroll").scrollHeight; }
Sign In·View Thread·Permalink

Great

merlin981

6:36 19 Mar '08

Thanks for sharing this. This will save a lot of headaches. 5 from me ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Rhabot - World of Warcraft Bot Uber RPGE - Free Private World of Warcraft Server Make long URLs short with NeatURL.net ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Sign In·View Thread·Permalink