asp.net通過Ajax UpdatePanel回傳后滾動(dòng)條位置變更解決方法

更新時(shí)間：2010年06月21日 16:06:32 作者：

用一個(gè)隱藏控件保存當(dāng)前scorll值?；貍骰貋砗蟾鶕?jù)scroll的值在重新設(shè)置scroll。

主要方法是：

用一個(gè)隱藏控件保存當(dāng)前scorll值。回傳回來后根據(jù)scroll的值在重新設(shè)置scroll。

1、首先用onscroll事件保存scorll值，并用HiddenField記錄scroll值

復(fù)制代碼代碼如下:

 
<div id="lv_content" class="unify_content" style="padding-left: 0; height: 455px;" onscroll="SetScrollPosition(this)"> 
</div> 
<asp:HiddenField ID="HiddenFieldScroll" runat="server" /> 

代碼
//2、編寫onscroll事件，主要用于保存當(dāng)前控件的scroll值

復(fù)制代碼代碼如下:

 
function funSaveScroll(sender) { 
//得到隱藏控件 
var vScroll = $get('ctl00_ContentPlaceHolder1_hfLvScroll'); 
if (vScroll != null) { 
//設(shè)置隱藏控件的值為scorll值 
vScroll.value = sender.scrollTop; 
} 
} 

代碼

復(fù)制代碼代碼如下:

 
//3、在頁面的加載完成事件中處理scorll值 
var prm = Sys.WebForms.PageRequestManager.getInstance(); 
//設(shè)置加載完成事件 
prm.add_pageLoaded(pageLoaded); 

//加載完成重新設(shè)置控件的scroll值 
function pageLoaded(sender, args) { 
//得到要設(shè)置scroll值的控件 
var vDiv = $get("lv_content"); 
if (vDiv != null) { 
//得到隱藏控件 
var vScrollValue = $get("ctl00_ContentPlaceHolder1_hfLvScroll"); 
//設(shè)置控件的scroll值 
vDiv.scrollTop = vScrollValue.value; 
} 
} 

通過以上代碼就可以解決回傳回來后scroll變動(dòng)的問題。

如果使用了Master頁面，可以將上邊的代碼放在master頁面中，進(jìn)行公用。

1)先在Master頁面中加入HiddenField。

<asp:HiddenField ID="HiddenFieldScroll" runat="server" />

代碼

復(fù)制代碼代碼如下:

 
/* 
2)在master頁面中編寫onscroll事件，記錄其它頁面中控件的scroll值 
使用方法:只要在要設(shè)置控件中設(shè)置其ID并加入onscroll事件即可。即加入 onscroll="SetScrollPosition(this)"語句 
*/ 
function SetScrollPosition(sender) { 
var scrollTemp = $get("ctl00_HiddenFieldScroll"); 
if (scrollTemp != null) { 
//將要設(shè)置控件的ID和scroll值一起保存。中"|"分隔 
scrollTemp.value = sender.id + "|" + sender.scrollTop; 
} 
} 

代碼

復(fù)制代碼代碼如下:

 
//3)在頁面的加載完成事件中處理scorll值 
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(onPageLoaded); 
//The Pageloaded for scroll orientation 
function onPageLoaded(sender, args) { 
var scrollTemp = $get("ctl00_HiddenFieldScroll"); 
if (scrollTemp != null) { 
var scorllValue = scrollTemp.value; 
if (scorllValue.length > 0) { 
var target = scorllValue.split("|"); 
if (target.length > 1) { 
var targetControlID = target[0]; 
var targetValue = target[1]; 
var targetControl = $get(targetControlID); 
//得到要設(shè)置控件 
if (targetControl == null || targetValue.length < 1) { 
return; 
} 
//設(shè)置控件的scroll值 
targetControl.scrollTop = targetValue; 
} 
} 
} 
} 

4)調(diào)用時(shí)，其它頁面控件中加onscroll="SetScrollPosition(this)" 并設(shè)置ID即可
<div id="lv_content" class="unify_content" style="padding-left: 0; height: 455px;" onscroll="SetScrollPosition(this)">
</div>

您可能感興趣的文章: