aspxページ内のdivにオーバーフローをautoに設定しました。 divの内容は動的に作成され、リンクボタンのリストで構成されます。ポストバック時にページ内のdivのスクロール位置を維持する
<div id="div1" style="overflow: auto; height: 100%;">
.....
</div>
私はdivの中にダウンscollとリンクボタンのいずれかをクリックすると、ページのリロードがdivの内側のスクロール位置を失い、DIVの上に私を取ります。それを防ぐ方法はありますか？
これはページ内のdivのためのものであることに注意してください。 Page.MaintainScrollPositionOnPostBack()は機能しません。
この状況を処理する方法の1つとして、javascriptを使用してdivのスクロール位置を追跡し、ページが読み込まれるたびにスクロール位置が以前の値にリセットされることが挙げられています。私は要素が、その一例に過ぎで直接JavaScriptを入れていないでしょう。実際には
<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>
：ここ
は、いくつかのサンプルコードです。代わりにスクロール位置をクッキーに格納することもできます。
最も簡単な方法は、コントロールをUpdatePanelにラップすることです。
をポストバックxを排除、少し汚れているが、動作します！私はそれが好きです。 –
リンクボタンを押すとどうなりますか？ポストバック中にどのような処理が行われますか？
これらの質問の回答に応じて、ポストバックを完全に取り除き、純粋にクライアント側で必要な操作を実行することを検討することができます。それを行うには
（私は現在のクライアントのための変換のこの種を行っております。）
リンクボタンを押すと、ページ上にあるグラフコントロールに入力されます。クライアント側で実行するのが最善のアプローチのようです – Nikhil
一つの方法は、scrollLeftとscrollTopスプライトプロパティの値、div要素のonscrollイベントでは、キャプチャすることです。これらの値を隠しテキストボックスに保存します。ポストバックでは、テキストボックスの値を使用してプロパティをリセットします。
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を使用したくないので... :)
）クイック –