在回發頁面中維護頁面內的滾動位置

我在aspx頁面中有一個div，溢出設置爲auto。 div的內容是動態創建的，由一系列鏈接按鈕組成。在回發頁面中維護頁面內的滾動位置

<div id="div1" style="overflow: auto; height: 100%;"> 
..... 
</div>

當我scoll下來div和點擊任何鏈接按鈕，頁面重新加載失去滾動位置的格內，帶我到div的頂部。有什麼辦法可以防止這種情況發生？

請注意，這是針對頁面內的div。 Page.MaintainScrollPositionOnPostBack()不起作用。

來源

2009-07-07 Nikhil

消除回傳X） – 2009-07-07 20:15:43

正如Jeff S所提到的，處理這種情況的一種方法是使用javascript來跟蹤div的滾動位置，並且每次頁面加載時都將滾動位置重置爲其先前的值。

下面是一些示例代碼：

<html> 
<body onload="javascript:document.getElementById('div1').scrollTop = document.getElementById('scroll').value;"> 
    <form id="form1" runat="server"> 
    <input type="hidden" id="scroll" runat="server" /> 
    <div id="div1" style="overflow: auto; height: 100px;" onscroll="javascript:document.getElementById('scroll').value = this.scrollTop"> 
     ...........<br /> 
     ...........<br /> 
     ...........<br /> 
     ...........<br /> 
     ...........<br /> 
     ...........<br /> 
     ...........<br /> 
     ...........<br /> 
     ...........<br /> 
     ...........<br /> 
     ...........<br /> 
     ...........<br /> 
     <asp:LinkButton ID="LinkButton1" runat="server" Text="test2"></asp:LinkButton> 
    </div> 
    <asp:LinkButton ID="LinkButton2" runat="server" Text="test1"></asp:LinkButton> 
    </form> 
</body> 
</html>

在實踐中，我不會直接把JavaScript中的元素，但它只是一個例子。您也可以將滾動位置存儲在cookie中。

來源

2009-07-08 13:51:05 joshb

最簡單的方法是將控件包裝在UpdatePanel中。

來源

2009-07-07 21:04:02

快速，有點髒，但工作！我喜歡。 – 2011-11-19 03:53:51

當鏈接按鈕被按下時會發生什麼？在回發期間發生了什麼處理？

根據這些問題的答案，您可能希望調查完全擺脫回發並完全執行客戶端的必要操作。

（我目前進行這種轉換的客戶。）

來源

2009-07-07 21:07:25

當按下鏈接按鈕時，它會填充頁面上的圖形控件。看起來像在客戶端執行它似乎是最好的方法 – Nikhil 2009-07-07 21:16:04

一種方式做到這一點是捕捉，在div的onscroll事件，從scrollLeft和scrollTop的屬性的值。將這些值保存在隱藏文本框中。回發時，使用文本框中的值重置屬性。

來源

2009-07-07 21:15:00

using System; 
using System.ComponentModel; 
using System.Web.UI; 
using System.Web.UI.WebControls; 

[ParseChildren(true, "Content")] 
public class ScrollSaverPanel: WebControl 
{ 
    [TemplateInstance(TemplateInstance.Single)] 
    [PersistenceMode(PersistenceMode.InnerProperty)] 
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)] 
    public ITemplate Content { get; set; } 

    private HiddenField HiddenField { get; set; } 

    protected override HtmlTextWriterTag TagKey 
    { 
     get 
     { 
      return HtmlTextWriterTag.Div; 
     } 
    } 

    protected override void OnInit(EventArgs e) 
    { 
     HiddenField = new HiddenField(); 

     var metaContainer = new WebControl(HtmlTextWriterTag.Div); 
     metaContainer.Controls.Add(HiddenField); 
     metaContainer.Style.Add(HtmlTextWriterStyle.Display, "none"); 

     Controls.Add(metaContainer); 

     var contentContainer = new WebControl(HtmlTextWriterTag.Div); 
     Controls.Add(contentContainer); 

     Content.InstantiateIn(contentContainer); 

     this.Style.Add(HtmlTextWriterStyle.Overflow, "auto"); 
     this.Attributes.Add("onscroll", string.Format("javascript:document.getElementById('{0}').value = this.scrollTop;", HiddenField.ClientID)); 

     base.OnInit(e); 
    } 

    protected override void OnPreRender(EventArgs e) 
    { 
     ScriptManager.RegisterStartupScript(this, this.GetType(), "setscroll", string.Format("javascript:document.getElementById('{0}').scrollTop = '{1}';", this.ClientID, HiddenField.Value), true); 
     base.OnPreRender(e); 
    } 
}

用法：

<general:ScrollSaverPanel runat="server"> 
    <Content> 
     <stwrw:Group runat="server" ID="rootGroup"/> 
    </Content> 
</general:ScrollSaverPanel>

由於一些人不希望使用一個UpdatePanel保存滾動位置的唯一目的... :)

來源

2013-03-14 16:56:09 Dbl

在回發頁面中維護頁面內的滾動位置

回答

相關問題