Maintain Scroll Bar position of a div within a gridview after a PostBack

Question

I used the following piece of code in the web.config in order to maintain the scrollbar position after a server postback:

<pages maintainScrollPositionOnPostBack="true" >
</pages>

All is working fine, but now i have a gridview encapsuled within a div with a scrollbar in the div (internal scrollbar).

When an event occur on one of the rows inside the gridview, the internal scrollbar doesn't maintain its original position unlike the outer one.

Any ideas?

Answer 1

For future reference:

The normal procedure is to write the following in the web.config file:

  <system.web>
    <pages maintainScrollPositionOnPostBack="true" >
    </pages>
  </system.web>

This will preserve the scroll bar position of all web pages.

If you have a scroll bar within a gridview (or div) then use the following script:

<script type="text/javascript">
    window.onload = function () {
        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("grdWithScroll").scrollTop = strPos;
        }
    }
    function SetDivPosition() {
        var intY = document.getElementById("grdWithScroll").scrollTop;
        document.cookie = "yPos=!~" + intY + "~!";
    }
</script>

And the div must be as follows:

<div id="grdWithScroll" …………  onscroll="SetDivPosition()">

http://michaelsync.net/2006/06/30/maintain-scroll-position-of-div-using-javascript-aspnet-20

Answer 2

Try this,

 <script type="text/javascript">
  window.onload = function () {
               var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
               document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;
              }
   function SetDivPosition() {
           var intY = document.getElementById("<%=scrollArea.ClientID%>").scrollTop;
           var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
           h.value = intY;
     }

  function afterpostback() {

            var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
            document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;

     }

</script> 

 <asp:HiddenField ID="hfScrollPosition" runat="server" Value="0" />
 <div id="scrollArea" onscroll="SetDivPosition()"   runat="server"  style="height:225px;overflow:auto;overflow-x:hidden;"> 

In the Page_Load

if (Page.IsPostBack) {
    ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "CallJS", "afterpostback();", true);
    }