11

オーバーフローが自動に設定された aspx ページ内に div があります。div のコンテンツは動的に作成され、リンク ボタンのリストで構成されます。

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

div を下にスクロールしていずれかのリンク ボタンをクリックすると、ページのリロードによって div 内のスクロール位置が失われ、div の一番上に移動します。それを防ぐ方法はありますか？

これはページ内の div 用であることに注意してください。Page.MaintainScrollPositionOnPostBack()動作しません。

4

5 に答える 5

15

Jeff S が述べたように、この状況を処理する 1 つの方法は、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-08T13:51:05.043 に答える
6

最も簡単な方法は、コントロールを UpdatePanel でラップすることです。

于 2009-07-07T21:04:02.823 に答える
3 
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-14T16:56:09.090 に答える
1

これを行う 1 つの方法は、div の onscroll イベントで、scrollLeft および scrollTop プロパティの値を取得することです。これらの値を非表示のテキスト ボックスに保存します。ポストバック時に、テキスト ボックスの値を使用してプロパティをリセットします。

于 2009-07-07T21:15:00.977 に答える
0

リンクボタンを押すとどうなりますか? ポストバック中にどのような処理が行われますか?

これらの質問に対する回答によっては、ポストバックを完全に取り除き、必要な操作を純粋にクライアント側で実行することを検討することをお勧めします。

(私は現在、クライアントに対してこの種の変換を実行しています。)

于 2009-07-07T21:07:25.237 に答える