I have an scrolling div enclosed in an atlas update panel. after a callback, the div scrolls to the top. After months of research i found the only way to fix it was through HTC. I don't know much about HTC, but i tried implementing it unsuccessfully. If you guys to look over the code and give you input, that be great.
///////// FILE: Scrollable Position.htc //////////
<PUBLIC: ATTACH EVENT ="ondocumentready" ONEVENT ="elementLoad()" />
<PUBLIC: PROPERTY NAME ="scrollPosition" />
<PUBLIC: PROPERTY NAME ="persistID"/>
// DHTML behavior for scrollable DIV
// (or other scrollable element)
// allows element to maintain scroll position within
// the DIV across postbacks.
<script language="javascript">
function elementLoad()
{
element.scrollTop = scrollPosition;
element.attachEvent("onscroll", saveScroll);
}
function saveScroll()
{
element.document.all[persistID].value = event .srcElement.scrollTop;
}
</script>
///////// HTML To Use the HTC //////////
<style>
.scrollable
{
overflow-x: hidden;
overflow-y: scroll;
height: 455px;
width: 225px;
}
</style>
<div
class="scrollable"
style="behavior: url(..\CSS\ScrollPosition.htc);"
persistID="<% = saveScrollPosition.ClientID%>"
scrollPosition="<%= saveScrollPosition.Value%>"
onscroll="document.getElementById('<%= saveScrollPosition.ClientID %>').value = event.srcElement.scrollTop;">
<input id="saveScrollPosition" type="hidden" runat="server" name="saveScrollPosition" />
<!-- Content Goes Here -->
</div>
///////// FILE: Scrollable Position.htc //////////
<PUBLIC: ATTACH EVENT ="ondocumentready" ONEVENT ="elementLoad()" />
<PUBLIC: PROPERTY NAME ="scrollPosition" />
<PUBLIC: PROPERTY NAME ="persistID"/>
// DHTML behavior for scrollable DIV
// (or other scrollable element)
// allows element to maintain scroll position within
// the DIV across postbacks.
<script language="javascript">
function elementLoad()
{
element.scrollTop = scrollPosition;
element.attachEvent("onscroll", saveScroll);
}
function saveScroll()
{
element.document.all[persistID].value = event .srcElement.scrollTop;
}
</script>
///////// HTML To Use the HTC //////////
<style>
.scrollable
{
overflow-x: hidden;
overflow-y: scroll;
height: 455px;
width: 225px;
}
</style>
<div
class="scrollable"
style="behavior: url(..\CSS\ScrollPosition.htc);"
persistID="<% = saveScrollPosition.ClientID%>"
scrollPosition="<%= saveScrollPosition.Value%>"
onscroll="document.getElementById('<%= saveScrollPosition.ClientID %>').value = event.srcElement.scrollTop;">
<input id="saveScrollPosition" type="hidden" runat="server" name="saveScrollPosition" />
<!-- Content Goes Here -->
</div>