Mantiene la posizione di scorrimento di un div all'interno di una pagina sul postback

Ho un div all'interno di una pagina aspx con overflow impostato su auto. Il contenuto del div viene creato dinamicamente e consiste in un elenco di pulsanti di collegamento.Mantiene la posizione di scorrimento di un div all'interno di una pagina sul postback

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

Quando ho Scoll giù in div e fare clic su uno dei pulsanti di collegamento, la pagina Ricarica perde la posizione di scorrimento all'interno del div e mi porta alla parte superiore del div. C'è un modo per impedirlo?

Si noti che questo è per un div all'interno della pagina. Page.MaintainScrollPositionOnPostBack() non funziona.

fonte

2009-07-07 Nikhil

Eliminare il postback x) –

Come diceva Jeff S un modo per gestire questa situazione, è l'uso di javascript per tracciare la posizione di scorrimento del div e ogni volta che la pagina carica reimposta la posizione di scorrimento sul valore precedente.

Ecco alcuni esempi di codice:

<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 pratica non vorrei mettere il javascript direttamente negli elementi, ma il suo solo un esempio. Puoi anche memorizzare la posizione di scorrimento in un cookie.

fonte

2009-07-08 13:51:05 joshb

Il modo più semplice è racchiudere il controllo in un UpdatePanel.

fonte

2009-07-07 21:04:02

rapida , un po 'sporco, ma funziona! Mi piace. –

Cosa succede quando si premono i pulsanti di collegamento? Quale elaborazione avviene durante il postback?

A seconda delle risposte a tali domande, è possibile esaminare il problema eliminando del tutto il postback ed eseguendo le operazioni necessarie esclusivamente lato client.

(attualmente sto eseguendo questo tipo di conversione per un cliente.)

fonte

2009-07-07 21:07:25

Quando il pulsante di collegamento viene premuto, popola un controllo grafico presente sulla pagina. Sembra che eseguirlo sul lato client sia l'approccio migliore – Nikhil

Un modo per farlo è quello di catturare, in caso onscroll del div, i valori delle proprietà scrollLeft e scrollTop. Salva quei valori in una casella di testo nascosta. Al postback, utilizza i valori delle caselle di testo per reimpostare le proprietà.

fonte

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

Usage:

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

Dal momento che alcune persone non vogliono utilizzare un UpdatePanel per il solo scopo di salvare la posizione di scorrimento ... :)

fonte

2013-03-14 16:56:09 Dbl

Mantiene la posizione di scorrimento di un div all'interno di una pagina sul postback

risposta

Problemi correlati