通过 Postback 在 UpdatePanel 中保留 DIV 的滚动位置答案

【问题标题】：Preserve scroll position of DIV in UpdatePanel through Postback通过 Postback 在 UpdatePanel 中保留 DIV 的滚动位置
【发布时间】：2015-04-20 01:36:02
【问题描述】：

我有一个显示在 div 中的 GridView，它包含在 asp.net 页面上的 UpdatePanel 控件中。设置 div 以使 GridView 在显示大量信息时可滚动，同时使更新面板中的其他信息稳定。

无论如何，GridView 中的项目是可点击的，但无论我尝试什么，都不会通过回发保留包含 div 的滚动位置。目前我正在尝试用 jQuery 解决这个问题，因为这似乎是最直接的方法。我的代码如下：

    <head id="Head1" runat="server">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script type="text/javascript">
            var scroll = function () {
                Y: '#<%= scrollPos.ClientID %>'
            };

            $(document).ready(function () {
                $("#subResults").scrollTop($(scroll.Y).val());

                $('#subResults').scroll(function () {
                    $(scroll.Y).val(this.scrollTop);
                });
            });
        </script>
    </head>

    <body>
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="resultPanel" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
            <ContentTemplate>
                <div id="subResults">
                    <asp:GridView ID="resultGrid" runat="server"
                                    AutoGenerateColumns="false" Visible="True"
                                    AutoGenerateSelectButton="True"
                                    OnRowDataBound="resultGrid_RowDataBound"
 OnSelectedIndexChanged="resultGrid_SelectedIndexChanged">
                        <Columns>
                            // columns columns columns...
                        </Columns>
                    </asp:GridView>
                    <asp:HiddenField ID="scrollPos" runat="server" Value="0" />
                </div>
    </body>

我正在使用here 给出的示例。无论我是否尝试完全按照给定的方式执行此操作，它都不起作用：我的 GridView 项目需要单击，执行它应该执行的操作，然后在回发完成后 GridView 再次滚动回顶部。如何让我的 div“subResults”通过回发保持其滚动位置？

【问题讨论】：

标签： c# jquery asp.net gridview

【解决方案1】：

已解决。下面的代码块，粘贴在我的 Script Manager 对象的正下方，让滚动 div 的行为符合我的要求：

<script type="text/javascript">
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        xPos = $get('scrollDiv').scrollLeft;
        yPos = $get('scrollDiv').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $get('scrollDiv').scrollLeft = xPos;
        $get('scrollDiv').scrollTop = yPos;
    }
</script>

感谢Andrew Frederick

【讨论】：