通过回发保留DIV在UpdatePanel中的滚动位置 [英] Preserve scroll position of DIV in UpdatePanel through Postback
问题描述
我有一个显示在div中的GridView，它包含在asp.net页上的UpdatePanel控件中.div设置为在显示大量信息时使GridView可滚动，同时使更新面板"中的其他信息稳定.
I have a GridView, displayed in a div, which is contained in an UpdatePanel control on an asp.net page. The div is setup to make the GridView scrollable when it is displaying a lot of information, while making other information in the Update Panel stable.
无论如何，GridView中的项目都是可单击的，但是无论我如何尝试，都不会通过回发保留包含div的滚动位置.目前，我正在尝试解决jQuery的问题，因为这似乎是最直接的方法.我的代码如下:
Anyway, the items in the GridView are clickable, but the scroll position of the containing div is not being preserved through the postback no matter what I try. Currently I'm trying to resolve the issue with jQuery, as this seems the most straightforward way. My code follows:
<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>
我使用的示例是此处.无论我是否尝试完全按照给定的方式进行操作，都行不通:我的GridView项进行了单击，执行了应做的事情，然后在回发完成之后，GridView再次滚动回到顶部.我如何才能使div的"subResults"在回发中保持其滚动位置?
I'm using the example given here. Whether I try to do this exactly as given or not, it doesn't work: my GridView item takes the click, does what it's supposed to do, and then the GridView is scrolled back to the top again after the Postback completes. How can I get my div "subResults" to hold its scroll position through the Postback?
推荐答案
已解决.粘贴在我的脚本管理器对象下方的下面的代码块，使滚动div表现出了我想要的方式:
Resolved. The code block below, pasted just below my Script Manager object, got the scrolling div behaving the way I wanted:
<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>
这篇关于通过回发保留DIV在UpdatePanel中的滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
