通过 Postback 在 UpdatePanel 中保留 DIV 的滚动位置
Posted
技术标签:
【中文标题】通过 Postback 在 UpdatePanel 中保留 DIV 的滚动位置【英文标题】：Preserve scroll position of DIV in UpdatePanel through Postback 【发布时间】：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”通过回发保持其滚动位置？
【问题讨论】：
【参考方案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
【讨论】：
以上是关于通过 Postback 在 UpdatePanel 中保留 DIV 的滚动位置的主要内容，如果未能解决你的问题，请参考以下文章
PostBack 期间 GridView.DataSource 为空
使用 PostBack 数据浏览页面 javascript Python Scrapy