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

Question

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

我有一个显示在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>

Run Code Online (Sandbox Code Playgroud)

我正在使用这里给出的例子.无论我是否尝试完全按照给定的方式执行此操作,它都不起作用:我的GridView项目接受单击,执行它应该执行的操作,然后在Postback完成后GridView再次滚动到顶部.如何让我的div"subResults"通过Postback保持其滚动位置？

Answer 1

Rob*_*ell 8

解决.下面的代码块粘贴在我的脚本管理器对象下面,使得滚动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>

Run Code Online (Sandbox Code Playgroud)

感谢Andrew Frederick

归档时间：	10 年，8 月前
查看次数：	4804 次
最近记录：	9 年，1 月前