Maintain scroller position on Div after page postback (ASP.NET)

I have a div as such:

<div style="overflow-y: scroll; height: 260px">

I contains a few hundred records and allows me to select an item to populate a formview control below it.

The problem is that when the page posts-back, the scroller position goes back to the top of the div. I want to try and maintain its position so that the selected record is still visible.

Any ideas?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Place something like:

 <asp:HiddenField id="hdnScrollPos" runat="server"/> in your aspx.

Then, some javascript like:

var hdnScroll = document.getElementById(<%=hdnScrollPos.ClientID%>);
var bigDiv = document.getElementById('bigDiv');
bigDiv.onscroll = function() {
     hdnScroll.value = bigDiv.scrollTop;
}

window.onload = function () { 
    bigDiv.scrollTop = hdnScroll.value;
}

Method 2

Here is a more refined way of FlySwat’s solution using JQuery which worked for me:

    var $ScrollPosition = $('#hfScrollPosition');
    var $ScrollingDiv = $('#pnlGroupDataContent');
    if ($ScrollPosition.length && $ScrollingDiv.length) {
        // Store scrolling value
        $ScrollingDiv.scroll(function () {
            $ScrollPosition.val($ScrollingDiv.scrollTop());
        });
        // Set scrolling
        $ScrollingDiv.scrollTop($ScrollPosition.val());
    }

Method 3

Disclaimer – not my code, but I’ve seen this used before:

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("divTest").scrollTop = strPos;
      document.getElementById("divTest").scrollTop = strPos;
    }
  }
  function SetDivPosition(){
    var intY = document.getElementById("divTest").scrollTop;

    document.cookie = "yPos=!~" + intY + "~!";
  }

The idea is to store the position of the scrollbar in a cookie. Another (better?) option would be to store it in a hidden field (or fields). Hope that gets you going…

Method 4

ASP.NET has this built in all you need to do is include the MaintainScrollPositionOnPostback in your page directive.

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>

Method 5

Replace thebody with document.getElementById("divTest")

If you worry that the onscroll event does not work in opera/ff, you can try changing

thebody.onscroll=SaveScrollLocation;

to

setInterval('SaveScrollLocation()", 500);

Method 6

Tried all of the above and none of them worked satisfactorily in chrome v39, however the method used on this page worked marvellously:

Maintain Scroll Position of DIV on PostBack in ASP.Net

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0