Maintain scroll position in listboxes in updatepanels, NOT the page

Question

I have a listbox inside an update panel. When I scroll down and select an item, it scrolls back to the top of the listbox. I heard that the dom does not keep track of the scroll position on a postback. Does anyone have a solution/example on how to solve this?

Thanks, XaiSoft

Answer 1

You're running into this problem because the UpdatePanel completely replaces your scrolled <select> element with a new one when the asynchronous request comes back.

Possible solutions:

1. Use JavaScript to store the scrollTop property of the <select> element in a hidden form element before the UpdatePanel is submitted (by calling the ClientScriptManager.RegisterOnSubmitStatement method) and then setting it on the new <select> when the AJAX call comes back. This will be tedious, error-prone, and probably not very compatible (see here).

2. Use JavaScript to store the <select>'s selectedIndex property and re-select that item when the AJAX call comes back. Obviously this won't work if the user hasn't selected anything yet.

3. Don't use UpdatePanels. Try jQuery + ASP.NET page methods instead.

Answer 2

    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    function BeginRequestHandler(sender, args) {
        if (($get('Panel1')) != null) {
            xPos = $get('Panel1').scrollLeft;
            yPos = $get('Panel1').scrollTop;
        }
    }

    function EndRequestHandler(sender, args) {
        if (($get('Panel1')) != null) {
            $get('Panel1').scrollLeft = xPos;
            $get('Panel1').scrollTop = yPos;
        }
    }
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);

    //Note: "Panel1" Panel or div u want to maintain scroll position
    //Note: This Java Script should be added after Scriptmanager*****

//Maintain Scroll Position for Panel/Div with out Update panel

    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('Panel1').scrollTop = strPos;
        }
    }
    function SetDivPosition() {
        var intY = document.getElementById('Panel1').scrollTop;
        document.title = intY;
        document.cookie = "yPos=!~" + intY + "~!";
    }


   //Note: "Panel1" Panel id or div id for which u want to maintain scroll position