Scroll-Position eines Div innerhalb einer Seite auf Postback pflegen

Ich habe ein div innerhalb einer aspx-Seite mit Überlauf auf auto. Der Inhalt des div wird dynamisch erstellt und besteht aus einer Liste von Verknüpfungsschaltflächen.Scroll-Position eines Div innerhalb einer Seite auf Postback pflegen

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

Als ich Scoll im div nach unten und klicken Sie auf der Link-Taste, verliert die Seite neu lädt die Bildlaufposition innerhalb des div und nimmt mich an die Spitze des div. Gibt es einen Weg, das zu verhindern?

Beachten Sie, dass dies für ein Div innerhalb der Seite ist. Page.MaintainScrollPositionOnPostBack() funktioniert nicht.

Quelle

2009-07-07 Nikhil

Beseitigen Sie die Postbacks x) –

Wie Jeff S erwähnte, ist ein Weg, um mit dieser Situation umzugehen, JavaScript, um die Bildlaufposition des div zu verfolgen und jedes Mal, wenn die Seite geladen wird, die Bildlaufposition auf ihren vorherigen Wert zurückzusetzen.

Hier ist ein Beispielcode:

<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 der Praxis würde ich nicht das Javascript setzt direkt in den Elementen, aber es ist nur ein Beispiel. Sie können die Bildlaufposition auch in einem Cookie speichern.

Quelle

2009-07-08 13:51:05 joshb

Der einfachste Weg ist, das Steuerelement in ein UpdatePanel zu verpacken.

Quelle

2009-07-07 21:04:02

Schnell , ein bisschen dreckig, aber funktioniert! Ich mag das. –

Was passiert, wenn die Link-Tasten gedrückt werden? Welche Verarbeitung findet während des Postbacks statt?

Abhängig von den Antworten auf diese Fragen, möchten Sie vielleicht untersuchen, wie Sie das Postback loswerden und die notwendigen Operationen rein clientseitig durchführen.

(I zur Zeit für einen Kunden dieser Art der Umwandlung am auszuführen.)

Quelle

2009-07-07 21:07:25

Wenn die Linkschaltfläche gedrückt wird, füllt sie ein auf der Seite vorhandenes Diagrammsteuerelement auf. Sieht so aus, als ob es am besten wäre, es auf der Client-Seite zu spielen – Nikhil

Eine Möglichkeit, dies zu tun in dem onscroll Ereignisse des div, zu erfassen ist, Eigenschaften die Werte aus dem scrollleft und scrollTop. Speichern Sie diese Werte in einem oder mehreren versteckten Textfeldern. Verwenden Sie beim Zurücksetzen die Werte aus den Textfeldern, um die Eigenschaften zurückzusetzen.

Quelle

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); 
    } 
}

Verbrauch:

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

Da einige Leute ein Update für den alleinigen Zweck wollen nicht Position des Sparens Blättern verwenden ... :)

Quelle

2013-03-14 16:56:09 Dbl

Scroll-Position eines Div innerhalb einer Seite auf Postback pflegen

Antwort

Verwandte Themen