Html 在回发时保持页面内 div 的滚动位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1094589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Maintain scroll position of a div within a page on postback
提问by Nikhil
I have a div within an aspx page with overflow set to auto. The contents of the div are dynamically created and consists of a list of link buttons.
我在 aspx 页面中有一个 div，溢出设置为自动。div 的内容是动态创建的，由链接按钮列表组成。
<div id="div1" style="overflow: auto; height: 100%;">
.....
</div>
When I scoll down in the div and click on any of the link buttons, the page reload loses the scroll position inside the div and takes me to the top of the div. Is there any way to prevent that?
当我在 div 中向下滚动并单击任何链接按钮时，页面重新加载会丢失 div 内的滚动位置并将我带到 div 的顶部。有什么办法可以防止吗？
Note that this is for a div inside the page. Page.MaintainScrollPositionOnPostBack()does not work.
请注意，这是针对页面内的 div。Page.MaintainScrollPositionOnPostBack()不起作用。
回答by joshb
As Jeff S mentioned one way to handle this situation is using javascript to track the scroll position of the div and each time the page loads reset the scroll position to its previous value.
正如 Jeff S 提到的一种处理这种情况的方法是使用 javascript 来跟踪 div 的滚动位置，并且每次页面加载时都将滚动位置重置为其先前的值。
Here's some sample code:
这是一些示例代码：
<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>
In practice I wouldn't put the javascript directly in the elements but its just an example. You could also store the scroll position in a cookie instead.
在实践中，我不会将 javascript 直接放在元素中，而只是一个例子。您也可以将滚动位置存储在 cookie 中。
回答by Ben Griswold
The easiest way is to wrap the control in an UpdatePanel.
最简单的方法是将控件包装在 UpdatePanel 中。
回答by Dbl
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);
}
}
Usage:
用法：
<general:ScrollSaverPanel runat="server">
<Content>
<stwrw:Group runat="server" ID="rootGroup"/>
</Content>
</general:ScrollSaverPanel>
Since some people don't want to use an Updatepanel for the sole purpose of saving scroll position... :)
由于有些人不想将 Updatepanel 用于保存滚动位置的唯一目的...... :)
回答by Jeff Siver
One way to do it is to capture, in the onscroll event of the div, the values from the scrollLeft and scrollTop properties. Save those values in a hidden text box(es). On post back, use the values from the text boxes to reset the properties.
一种方法是在 div 的 onscroll 事件中捕获来自 scrollLeft 和 scrollTop 属性的值。将这些值保存在隐藏的文本框中。在回发时，使用文本框中的值来重置属性。
回答by Adam Ralph
What happens when the link buttons are pressed? What processing occurs during the postback?
按下链接按钮时会发生什么？回发期间会发生什么处理？
Depending on the answers to those questions, you may want to investigate getting rid of the postback altogether and performing the necessary operations purely client-side.
根据对这些问题的回答，您可能想要调查完全摆脱回发并纯粹在客户端执行必要的操作。
(I am currently performing this kind of conversion for a client.)
（我目前正在为客户执行这种转换。）
