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

Question

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?

score 12 · Accepted Answer · edited Apr 04 '14 at 06:33

12

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;
}

edited Apr 04 '14 at 06:33

Trikaldarshiii

11,174
16
67
95

answered Jul 26 '09 at 13:55

FlySwat

172,459
74
246
311

I found it necessary to have `var hdnScroll = document.getElementById('hdnScrollPos'); ` rather than that shown, but thanks all the same. – Brian Hooper Jan 09 '13 at 16:19
Remember to put ViewStateMode="Enabled" if you have disabled it globally – bertasoft Mar 26 '22 at 18:39

score 3 · Answer 2 · answered Mar 21 '12 at 15:29

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());
    }

score 1 · Answer 3 · answered Jul 26 '09 at 13:32

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...

score 1 · Answer 4 · answered Jul 26 '09 at 13:50

1

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

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

answered Jul 26 '09 at 13:50

I doubt that works on embedded divs, just the main page in general. – FlySwat Jul 26 '09 at 13:52
Yeah I'm not sure this will work on DIV's contained within the page. Although I haven't tried it. – Chris Pietschmann Jul 26 '09 at 13:52
FYI this appears to only work for early versions of IE. – Mmm Aug 25 '15 at 02:22
This works only on main page and not on embedded divs. – Raphael Mutiso Dec 30 '19 at 11:53

score 1 · Answer 5 · edited Mar 19 '14 at 21:47

1

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);

edited Mar 19 '14 at 21:47

Taryn

242,637
56
362
405

answered Jul 26 '09 at 14:08

mangokun

5,493
2
15
8

score 1 · Answer 6 · answered Dec 01 '14 at 12:02

1

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

answered Dec 01 '14 at 12:02

Myke Black

1,299
15
15

score 0 · Answer 7 · answered Jul 14 '22 at 08:07

<asp:HiddenField ID="hfScroll" runat="server" ClientIDMode="Static" />

<script>
        $(document).ready(function () {
            ScrollMaintain();
            $(window).scroll(function () {
                $('#hfScroll').val($(window).scrollTop());
            });

        function ScrollMaintain() {
            var scroll = $('#hfScroll').val();
            scroll = (scroll == '' ? '0' : scroll);
            $(window).scrollTop(scroll);
        }
    </script>

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

7 Answers7

Linked