CodeProject: Persisting the scroll position of a DIV on AJAX postbacks . Free source code and programming help

Announcements

Monthly Competition

Articles

Desktop Development

Web Development

Enterprise Systems

Content Management Server

Microsoft BizTalk Server

SQL Reporting Services

Platforms, Frameworks & Libraries

Windows Communication Foundation

Windows Presentation Foundation

Windows Workflow Foundation

Cryptography & Security

Threads, Processes & IPC

Development Lifecycle

Debug Tips

Design and Architecture

Uncategorised Technical Blogs

Services

Code-signing Certificates

Job Board

CodeProject VS2008 Addin

Feature Zones

Product Showcase

WhitePapers / Webcasts

IBM DeveloperWorks

ASP.NET Web Hosting

Advanced Search

Report

Discuss

7 votes for this article.

Popularity: 3.51 Rating: 4.15 out of 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

Member

Location:

Denmark

Other popular Ajax and Atlas articles:

Build Google IG like Ajax Start Page in 7 days using ASP.NET Ajax and .NET 3.0
Build a start page similar to Google IG in 7 nights using ASP.NET Ajax, .NET 3.0, Linq, DLinq and XLinq.
An Introduction to AJAX Techniques and Frameworks for ASP.NET
This article introduces AJAX to ASP.NET developers, implementing an example web page in different ways using ASP.NET Atlas, ASP.NET callbacks, Ajax.Net, Anthem.Net, and MagicAjax.Net.
ASP.NET Ajax Under-the-hood Secrets
Performance tips and hard-core tricks that change core runtimes, not for the faint-hearted
Introduction to Anthem.NET
How to do AJAX without writing any JavaScript.
Dropdown Box Using AJAX
This article illustrates two dropdown-boxes with nations and states. When selecting a particular nation, the corresponding states will be in the states dropdownbox.

Article Top

You must Sign In to use this message board.

FAQ
Noise Tolerance Layout Per page

Msgs 1 to 9 of 9 (Total in Forum: 9) (Refresh)

FirstPrevNext

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

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

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

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;


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);
}

</script>

...

<body  önload="init()">
</body>

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

Re: Great

perels

8:03 19 Mar '08

Thanks merlin981
Sign In·View Thread·PermaLink	5.00/5 (1 vote)

Last Visit: 7:39 5 Jul '09 Last Update: 7:39 5 Jul '09

General News Question Answer Joke Rant Admin

PermaLink | Privacy | Terms of Use
Last Updated: 18 Mar 2008
Editor: Smitha Vijayan