Click here to Skip to main content
12,553,313 members (56,735 online)
Click here to Skip to main content
Add your own
alternative version


34 bookmarked

Persisting the scroll position of child DIV’s using MS AJAX

, 9 Sep 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
An article on building a control using MS AJAX to persist the scroll position of child DIV's.


While the ScriptManager and UpdatePanel found in Microsoft AJAX do a good job of persisting your pages' scroll position during partial post back operations, you might be surprised to find out the same is not the case for scrollable child DIVs contained within an UpdatePanel.

The PersistentScrollPosition control presented in this article seeks to remedy this issue, using a client-side behavior and ASP.NET server control implemented using Microsoft AJAX.


While it is certainly not my intention to review the internals of the UpdatePanel and PageRequestManager or implementing any of the client-side components (Sys.Component, Sys.UI,Behavior, or Sys.UI.Control), a quick understanding can go a long way into understanding and resolving this particular problem. There are two key items to keep in mind for this control:

  1. Client-side components are disposed of and recreated during the partial post back lifecycle so you can't use the control's instance to store any data you need to survive this.
  2. The HTML output of the UpdatePanel is completely replaced during a partial post back (assuming it was triggered) through the innerHTML property, which is why the scroll position problem exists in the first place.

Using the code

For those who just want the solution, using the code is straightforward. The control has one property you need to set, named ControlToPersist. This is a string which takes the ID of the server-side container DIV (it must have runat="server").

<asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="always">
<asp:Button runat="server" ID="btnPostBack" Text="Post Back" OnClick="btnPostBack_Click" />
<br />
<div style="width:590px;height:400px;overflow-y:scroll;overflow-x:hidden;" 
     runat="server" id="persistMe">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

<mbc:PersistentScrollPosition runat="server" ID="psf1" ControlToPersist="persistMe" /> 

Building the control

The control consists of two parts, both of which, for the most part, are very "cookie cutter". On the server side, we inherit from Control, and implement IScriptControl and INamingContainer, and create a HiddenField during initialization to store our scroll position in between partial post backs.

public class PersistentScrollPosition : Control, IScriptControl, INamingContainer
    protected override void OnInit(EventArgs e)

        // Create hidden control for storage

        storage = new HiddenField();
        storage.ID = "storage";

When creating the script descriptors for the client-side initiation, we pass through the scrollable DIV's ClientID, the control's ElementID, and we pass in a reference to the HiddenField's DOM element using the AddElementProprety method of the ScriptComponentDescriptor class.

public IEnumerable<scriptdescriptor /> GetScriptDescriptors()
    ScriptComponentDescriptor scd = 
            new ScriptBehaviorDescriptor("Mbccs.WebControls.PersistentScrollPosition", 
    scd.AddElementProperty("storage", storage.ClientID);
    yield return scd;

On the client-side, the control inherits from the Sys.UI.Behavior base class. Upon control initialization, it hooks into two events: the scroll DOM event of the DIV, and the EndRequest event of the Sys.WebForms.PageRequestManager class. The EndRequest event is when the scroll state is restored, but I'll get to that shortly.

initialize : function() {
        Mbccs.WebControls.PersistentScrollPosition.callBaseMethod(this, 'initialize');
        this._scrollDelegate = Function.createDelegate(this, this._onScroll);
        this._endRequestDelegate = Function.createDelegate(this, this._onEndRequest);
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        $addHandler(this.get_element(), 'scroll', this._scrollDelegate);

When the DIV is scrolled, the x,y scroll position is serialized and stored in the HiddenField server-side control we created earlier.

_onScroll : function(e) {
        this._storage.value = 

_getScrollPosition : function() {
        var el = this.get_element();
        if (el) {
            return {
                x: el.scrollLeft || 0,
                y: el.scrollTop || 0

To prevent null's from floating around, the x,y coordinates are coerced into 0's if either the scrollLeft or scrollTop properties are null.

The EndRequest event is fired when "an asynchronous post-back is finished and the control has been returned to the browser", so it's a perfect time to restore our scroll state.

_onEndRequest : function(sender, args) {
        var o = null;        
        if(this._storage.value !== '')
            o = Sys.Serialization.JavaScriptSerializer.deserialize(this._storage.value);
        if (o) {
            var el = this.get_element();
            el.scrollLeft = o.x;
            el.scrollTop = o.y;
            this._storage.value = '';

The dispose method isn't usually a place of any particular interest, but its worthy of noting that it you need to unhook the DIV's scroll event prior to calling dispose on the base class.

dispose : function() {
        $removeHandler(this.get_element(), 'scroll', this._scrollDelegate);
        Mbccs.WebControls.PersistentScrollPosition.callBaseMethod(this, 'dispose');
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        delete this._endRequestDelegate;
        delete this._scrollDelegate;


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


About the Author

Steven Berkovitz
Web Developer
Canada Canada
Steven is VP Development at MBC Computer Solutions Ltd. (, a Richmond Hill based company specializing in e-Business Application Development, e-Store Solutions, Managed Co-Location and Proactive IT services.

Steven has over 10 years experience in software and hardware design and is experienced with a large array of platforms, technologies and languages.

In his spare time, Steven enjoys a wide array of music, is an avid skier and enjoys spending time with friends.

Steven is the primary contributor of MBC's blog which can be read at

You may also be interested in...


Comments and Discussions

Generaldll for framework 3.5 Pin
MaryVeranis29-Apr-10 8:35
memberMaryVeranis29-Apr-10 8:35 
Generalstorage Error Pin
AzEric14-Jul-09 9:56
memberAzEric14-Jul-09 9:56 
GeneralRe: storage Error Pin
Steven Berkovitz14-Jul-09 9:58
memberSteven Berkovitz14-Jul-09 9:58 
GeneralYour article inspired me to create a new one. Pin
perels18-Mar-08 16:49
memberperels18-Mar-08 16:49 
GeneralUsing in webcontrols Pin
miketong30-Nov-07 5:23
membermiketong30-Nov-07 5:23 
GeneralRe: Using in webcontrols [modified] Pin
Steven Berkovitz30-Nov-07 5:24
memberSteven Berkovitz30-Nov-07 5:24 
GeneralRe: Using in webcontrols Pin
miketong30-Nov-07 5:40
membermiketong30-Nov-07 5:40 
GeneralRe: Using in webcontrols Pin
Steven Berkovitz30-Nov-07 5:44
memberSteven Berkovitz30-Nov-07 5:44 
QuestionRe: Using in webcontrols Pin
qazzer19-Jun-08 4:21
memberqazzer19-Jun-08 4:21 
AnswerRe: Using in webcontrols Pin
Steven Berkovitz19-Jun-08 4:24
memberSteven Berkovitz19-Jun-08 4:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.161021.1 | Last Updated 9 Sep 2007
Article Copyright 2007 by Steven Berkovitz
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid