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" />