在带有母版页的 div 中滚动 position

Question

i have a div tag within a content tag as i am using a masterpage which has the forms and body tags.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">

  <div id="xxx"  style="overflow:scroll; height:450px;">

     <asp:GridView ID="GridView1" runat="server" ...>

     </asp:GridView>

  </div>
</Content>

I wish to maintain the scroll position of the div when any postback happens.

There are jscripts when i search for it but i dont know how do i apply them with the masterpage.

please help if there is an easier way. or how to use javascript with the above code.

Any help is appreciated.. thanks

Answer 1

You can use AJAX to remove postbacks which will keep your position. More specifically you can take a look at the UpdatePanel control.

Update:

A non-AJAX solution would be to add the following attribute in your page tag.

<%@ Page MaintainScrollPositionOnPostback="true" %>

Answer 2

Try this it worked for me.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <div id="divScroll" style="overflow:auto; height:450px;">  
        <asp:GridView ID="GridView1" runat="server" ...>
        </asp:GridView>   
    </div> 
</Content> 
<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);               
</script>
</asp:UpdatePanel>

javascript file add the following code:

var scrollTop;
function BeginRequestHandler(sender, args) 
{
    var m = document.getElementById('divScroll');
    scrollTop = m.scrollTop;
}
function EndRequestHandler(sender, args) {
    var m = document.getElementById('divGrid');
    m.scrollTop = scrollTop;
}