在 Ajax Update Panel 中保持 Panel 滚动位置

Ajax Update Panel 在回发后总是会重置其中 Panel 的滚动位置。这意味着如果你的 panel 在 ajax update panel 内部，那么你将会遇到 panel 的滚动位置在回发后不久就被重置的情况。

当 panel 包含输入字段并且需要输入回发时，这种行为对用户来说会变得更令人恼火，因为滚动位置也会被重置。 这样用户将不得不手动向下滚动面板才能到达下一个输入控件进行输入。

许多开发人员都面临这个问题，这里提供了可以让你在页面从回发返回后立即重置滚动位置的解决方案；

准则

-  有一个隐藏字段，比如 'hfScrollvalue' (用于保存和重置滚动位置)

- 编写一个 JS 方法 "GetScrollPosition"，用于获取 panel 的滚动位置并保存到你的隐藏字段中

- 编写一个 JS 方法 "SetScrollPosition"，用于从隐藏字段获取滚动位置并将其设置回 panel

- 然后你可以通过添加一个处理程序来在请求结束时调用 SetScrollPosition 方法

- 在请求结束后，滚动位置再次由 update panel 设置。因此，你可以稍微延迟一下将你的值设置到 panel 的滚动位置。你可以通过使用 Javascript 的 setTimeout 方法来实现。因此，通过这种延迟，你保存的位置将在 ajax 处理完成后设置在 panel 上

你可以使用以下代码

 

function GetScrollPosition() { 

document.getElementById('<%= hfScrollvalue.ClientID %>').value = document.getElementById('<%= Panel1.ClientID %>').scrollTop; 
    } 
 
    function SetScrollPosition() { 

            document.getElementById('<%= Panel1.ClientID %>').scrollTop = document.getElementById('<%= hfScrollvalue.ClientID %>').value; 
        } 
    } 
 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest); 
 
    function EndRequest(sender, args) { 

        setTimeout('SetScrollPosition()', 60); 
    }

如果你正在使用一个 TextBox，该 TextBox 在一个 UpdatePanel 内，并且也绑定到一个 Timer，那么你可以做类似这样的事情

    Sys.Application.add_init(DownloadInit);

    function DownloadInit(sender) {

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);

    }

    function SetScrollPosition() {

        var textArea = document.getElementById('<%=TextBox1.ClientID%>');

        textArea.scrollTop = textArea.scrollHeight;

    }

    function EndRequest(sender, args) {

         SetScrollPosition();

    }