Nem vagy bejelentkezve. Ha bejelentkezel, további menüpontokat érhetsz el. Ha még nincs felhasználóneved és jelszavad, itt regisztrálhatsz.


Kezdőoldal  ---- Blog Témakörök  --- Webfejlesztés  ---- Görgethető panel scroll pozíció megőrzése
2010.01.02
Görgethető panel scroll pozíció megőrzése

Ha van egy olyan panelünk, amelyik görgethető, és beleteszünk például egy datalist objektumot, nagyon szép, hogy a panel ilyenkor fix helyet foglal, és görgethetjük. Azonban ha valamilyen kattintás következtében frissül a kontrol (vagy bármi más), a scroll mindig előre ugrik. (Ha függőleges, akkor felülre, ha vízszintes, akkor jobbra.)
Például valamilyen áttekintőt teszünk a listába, és alá egy "Részletek" linket, majd a görgethető panel mellé pakolunk egy, a kiválasztott elem részleteit kibontó másik panelt.

A jelenség elég zavaró, ha jó hosszú a görgetőben a listánk, és mindig scrollozhatunk a megfelelő helyre. A jelenség még AJAX UpdatePanel esetén is jelentkezik. A MaintainScrollPositionOnPostback="true" beállítás sem segít, mert ez az oldal scroll pozíciójának megőrzésére jó, de mi csak egy panel scrolljának a pozícióját szeretnénk megőrizni.
A megoldás:

Egy kis javascriptben megjegyezzük az updatepanel elküldésekori scroll pozíciót, amit eltárolunk egy hidden mezőben, és frissítéskor a scrollt beállítjuk.

<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
var ScrollTopValue = document.getElementById("<%=scrollPos.ClientID%>").value;
document.getElementById("<%=leftBar.ClientID%>").scrollTop = ScrollTopValue;
}
function saveScrollPos() {
var elem = document.getElementById("<%=leftBar.ClientID%>");
scrollTop = elem.scrollTop;
document.getElementById("<%=scrollPos.ClientID%>").value = scrollTop;
}
</script>

A görgethető panel:
<asp:Panel ID="leftBar" runat="server" ScrollBars="Vertical" Height="600px" Width="170px" >
</asp:Panel>

Itt jegyezzük meg a pozíciót:
<input id="scrollPos" runat="server" type="hidden" />


 

Kulcsszavak:
javascript panel tipp
  Hozzászólások
Hozzászólás a cikkhez:
Ide írhatsz: