A div tag allows you to add scrolling to a user control. But how do I maintain the position of the scroll on postback or when I return to the page?
The Page attribute MaintainScrollPositionOnPostback only works at the page level, so we need a way to persist scroll positions for a control.
You can use javascript to maintain the scroll position in a cookie and set the scroll position in the postback. Below is the javascript inside the ascx markup of the user control to make the div scrolling persistent:
<
script type="text/javascript">function GetDivPosition()
{
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0){
var intS = strCook.indexOf("!~"); var intE = strCook.indexOf("~!"); var strPos = strCook.substring(intS+2,intE); document.getElementById("persistMe").scrollTop = strPos;
}
}
window.onload = function(){
GetDivPosition();
} function SetDivPosition(){ var intY = document.getElementById("persistMe").scrollTop; document.title = intY; document.cookie = "yPos=!~" + intY + "~!";
}
</script><
div id="persistMe" style="width:720px; height:200px; overflow:auto;" class="PanelBGColorMain" onscroll="javascript:SetDivPosition()" >After using the javascript for persisting scrolling, I discovered it works fine as long as I don't have to dynamically recreate the control. If you recreate the control in code and the control sits inside an AJAX update panel, you'll need some way of calling the javascript from within the code. This is accomplished through the script manager as shown:
ScriptManager.RegisterStartupScript(this, this.GetType(), "myScript3", "GetDivPosition();", true);The RegisterStartupScript method calls the javascript inside your ascx markup.
If your control is not sitting inside an AJAX panel, you can call RegisterStartupScript from the ClientScriptManager class.
Hope this staves off some of the frusteration I went through in coming up with this solution for the next guy dealing with scrolling of controls.

Mike GoldPosted Jun 20, 2008, 1:42 PM
After revisiting this issue, I found a great article on codeproject that solves this problem inside an AJAX context. http://www.codeproject.com/KB/ajax/PersistDIVScrollPosition.aspx The solution differs from mine in the following way: Instead of using a cookie, you can use a hidden input field. And instead of calling RegisterStartupScript to save the position, you can add an end request handler using the PageRequestManager. my project had a user control with a div tag that I placed inside an AJAX page, so I found that I needed to look at the source generated by the page to figure out how to write the id of my div control and hidden field (ASP.NET changes the id names). Here is my full solution for my ascx control based on the article above: Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function EndRequestHandler(sender, args) { setScrollPos(); } function saveScrollPos(){ // alert(document.getElementById("ctl00_ContentPlaceHolder1_ScheduleSlotControl1_persistMe").scrollTop); document.getElementById("ctl00_ContentPlaceHolder1_ScheduleSlotControl1_scrollPos").value = document.getElementById("ctl00_ContentPlaceHolder1_ScheduleSlotControl1_persistMe").scrollTop; } function setScrollPos(){ // alert(document.getElementById("ctl00_ContentPlaceHolder1_ScheduleSlotControl1_scrollPos").value); document.getElementById("ctl00_ContentPlaceHolder1_ScheduleSlotControl1_persistMe").scrollTop = document.getElementById("ctl00_ContentPlaceHolder1_ScheduleSlotControl1_scrollPos").value; } window.onload = function() { setScrollPos(); } </script> <input type="hidden" id="scrollPos" name="scrollPos" value="0" runat="server"/> <div id="persistMe" runat="server" style="width:1000px; height:300px; overflow:auto; overflow-x:hidden; overflow-y:scroll; z-index:55" onscroll="saveScrollPos();" > <asp:Table ID="Table1" runat="server" GridLines="Both" EnableViewState="false" BorderStyle="Solid" BorderWidth="1" Width="1000px" >
jeevana attluriPosted Oct 18, 2007, 3:04 AM
Gud Morning Sir Smart navigation can only be used by Internet Explorer 5+. StaticScrollBackPosition caters for majority of browsers: Internet Explorer 4 + Netscape 4 + Opera 7 + (possibly lower versions as well) Mozilla 1 + (possibly lower versions as well) Under smart navigation, the formatting of the pages from post back can go tremendously wrong; if the styling of the page is a mixed breed of CSS and HTML tags. To use the server control, it is as simple as dropping it in a web form (must be under the server side <form>). However, I am going to explain the few tricks that I used in creating the server control. The basic idea behind the StaticScrollBackPosition control is that it will not output any user interface – it will only use JavaScript to do all the work for us. The major tricks are: As the user "views" the page, the scrolled position is constantly recorded to the hidden fields that StaticScrollBackPosition provided. Back to the server processing, StaticScrollBackPosition will then capture the positions that was placed in the hidden fields and then send a JavaScript block telling the browser where to scroll to once the page has loaded. And so the cycle will continue from step one after each post-back. It is that simple. And to make things sound even more simpler, is the fact that the JavaScript has an extremely small size. the script listed below is the one that will save the scroll position constantly to hidden fields. The rate that the scroll position is saved is 100 times per second to ensure maximum resolution of where the user is soo i have used the setTimeout ..N RestoreScrollPosition method is only called once the page has loaded. The JavaScript waits for the page to load completely so we could overcome a bug in Internet Explorer .Drop the compiled assembly into thebin folder and where i need to work . All that i have done to use StaticScrollBackPosition on pages..I hope that this server control will help many of you that cannot use smart navigation for whatever reason (be it for rendering or other technical issues that may occur). And the main reason why I wrote this server control is that it can give a better web browsing experience for all browsers and all users may b kk sir
Mike GoldPosted Oct 16, 2007, 12:52 PM
I've read your comment carefully and it does seem to call SaveScrollPosition continously. Does this cause a performance issue? Also, I'm not clear how RestoreScrollPosition is generated from the code to produce the saved scroll value. Can you elaborate?
jeevana attluriPosted Oct 16, 2007, 7:16 AM
May b is this format is not to the mark but this is also doing fine ...the script listed below is the one that will save the scroll position constantly to hidden fields. The rate that the scroll position is saved is 100 times per second to ensure maximum resolution of where the user is. The script is listed below: function SaveScrollPositions() { document.forms[0].StaticPostBackScrollVerticalPosition.value = (navigator.appName == 'Netscape') ? document.pageYOffset : document.body.scrollTop; document.forms[0].StaticPostBackScrollHorizontalPosition.value = (navigator.appName == 'Netscape') ? document.pageXOffset : document.body.scrollLeft; setTimeout('SaveScrollPositions()', 10); } SaveScrollPositions(); And, when the page has been posted back to, it then renders the following JavaScript: function RestoreScrollPosition() { scrollTo(0, 400); // determined during run-time } window.onload = RestoreScrollPosition; What is noteworthy on the above JavaScript is that the RestoreScrollPosition method is only called once the page has loaded. The JavaScript waits for the page to load completely so we could overcome a bug in Internet Explorer when the script attempts to scroll the page (via the scrollTo client method). If another JavaScript relies on this type of listening, either StaticScrollBackPosition control will not work or the other JavaScript block(s) will not work correctly – so be warned that this will be the only known bug. However, I did try to soften the blow and told it to attach to the window's load event and not the document's load event. Therefore, if you have some HTML, as shown below, this short-fall (bug) will not effect you at all: <body onLoad="..."> <!-- some code --> </body> Ending the tag like this <%@ Register TagPrefix="Alc" Namespace="Alo.WebControls" Assembly="StaticPostBackPosition" %> <Alc:StaticPostBackPosition runat="server"/> plz do correct if am wrong .... Happy Coding Thank U