處理在主版頁面加AJAX環境下處理捲軸回傳保持不動的問題
處理TreeView列表的捲軸問題時,發現很多流行的處理方法沒有效果,後發現在Master Ajax環境下使用這種流行作法不行。於是自力更生,用以下代碼實現了在主版頁面,使用Ajax環境下的捲軸在PostBack後仍在原位的問題:
在頁面上加上這段JS:
<script type="text/javascript">
var disPostion = 0;
function SaveScroll() {
disPostion = TaskListDivID.scrollTop;
}
function RestoreScroll() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function EndRequestHandler(sender, args) {
TaskListDivID.scrollTop = disPostion;
}
</script>
用這個DIV套住需要這種捲軸的內容(如TreeView)。
<div id="TaskListDivID">
treeview等捲軸內容
</div>
在後台cs代碼中如是處理:
//這段代碼為了處理捲軸複位的問題 start
ScriptManager.RegisterOnSubmitStatement(this.Page, this.Page.GetType(), "SavePanelScroll", "SaveScroll();");
if (this.IsPostBack)
{
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "SetPanelScroll", "RestoreScroll();", true);
}
//end
注意: var disPostion = 0;在AJAX UpdatePanel的作用下,並不會因為回傳頁被重設。
另外:我在Ascx中實現的這個,由於使用了ajax的頁面需要ScriptManager,而在主版頁面裡已經使用了,不能重複添加同樣的,所以,使用了其Proxy版本。
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
</asp:ScriptManagerProxy>