在回发页面中维护页面内的滚动位置

我在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

在回发页面中维护页面内的滚动位置

回答

相关问题