65.9K
CodeProject 正在变化。 阅读更多。
Home

在 AJAX 回发时持久化 DIV 的滚动位置

perels
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.43/5 (15投票s)

2008年3月18日

CPOL

1分钟阅读

viewsIcon

102843

本文档解释了如何在 AJAX 回发时保持 DIV 的滚动位置。

引言

默认情况下，每次使用 AJAX 进行回发时，DIV 标签的滚动位置都会被重置。 如果您正在使用 AJAX 和 DIV 标签，并且需要在 AJAX 回发发生时保持 DIV 标签的滚动位置，则可以使用以下代码。 我在自己的项目中使用了这段代码，其中我需要在固定的 DIV 标签内有一个 UpdatePanel 和一个 GridView，同时在编辑/取消/更新命令上保持滚动位置。

该代码已在 IE6、IE7、FF 2.0.0.12 和 Opera 9.26 上进行了测试，并且基本上适用于任何支持 document.getElementById() 方法的浏览器。

背景

我最近遇到了上述问题。 因此，我在 Google 上搜索并找到了 CodeProject 上的一个文章 (使用 MS AJAX 保持子 DIV 的滚动位置) - 但是，提供的解决方案对我不起作用，所以我决定实现我自己的解决方案。

使用代码

在你的 <head></head> 或 <body></body> 标签之间添加以下代码

<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
    setScrollPos();
} 
function saveScrollPos(){
    document.getElementById("scrollPos").value = 
             document.getElementById("divScroll").scrollTop;
}
function setScrollPos(){
    document.getElementById("divScroll").scrollTop = 
             document.getElementById("scrollPos").value;
}
</script>

注意！ 如果您的元素封装在另一个控件、母版页、UpdatePanel 等中，您可能需要将 scrollPos 名称更改为 ClientID。 您可以这样获取 ClientID

public static string scrollPos = String.Empty;

protected void Page_Load(object sender, EventArgs e){
  scrollPos = ((HtmlInputHidden)scrollPos).ClientID.ToString();
}

然后，将 JavaScript 更改为

<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
    setScrollPos();
} 
function saveScrollPos(){
    document.getElementById("<%=scrollPos%>").value = 
                document.getElementById("divScroll").scrollTop;
}
function setScrollPos(){
    document.getElementById("divScroll").scrollTop = 
                document.getElementById("<%=scrollPos%>").value;
}
</script>

假设您已经将 <asp:ScriptManager> 添加到您的页面，请添加以下内容

<input type="hidden" id="scrollPos" name="scrollPos" value="0" runat="server"/>

<asp:UpdatePanel runat="server" ID="up1" UpdateMode="always">
<ContentTemplate>
<asp:Button runat="server" ID="button1" text="Post back!" />

<div id="divScroll" onscroll="saveScrollPos();" 
        style="height: 200px; overflow:auto; overflow-x:hidden; overflow-y:scroll;" >

</div>

</ContentTemplate> 
</asp:UpdatePanel>

关注点

使代码工作与我查看的其他资源相比，诀窍是 endRequest - 更多信息请参见：PageRequestManagerEndRequestEvent。

更新

  • 2008-3-19 - 修复了一些拼写错误 :-)
© . All rights reserved.