In this article I will explain with an example, how to maintain scroll position of
HTML DIV on
PostBack in
ASP.Net. An
HTML DIV with vertical
scrollbar gets back to original position after
PostBack and hence to solve this problem we need to retain its
scroll position value using
JavaScript and then again apply to the
DIV after
PostBack. This technique helps
DIV not to lose its scroll position on
PostBack.
HTML Markup
The
HTML Markup consists of
HTML DIV with vertical
scrollbar for which we will maintain the scroll position on
PostBack, an
HTML HiddenField and an
ASP.Net Button to perform
PostBack.
<div id="dvScroll" style="overflow-y: scroll; height: 260px; width: 300px">
1. This is a sample text
<br />
2. This is a sample text
<br />
3. This is a sample text
<br />
4. This is a sample text
<br />
5. This is a sample text
<br />
6. This is a sample text
<br />
7. This is a sample text
<br />
8. This is a sample text
<br />
9. This is a sample text
<br />
10. This is a sample text
<br />
11. This is a sample text
<br />
12. This is a sample text
<br />
13. This is a sample text
<br />
14. This is a sample text
<br />
15. This is a sample text
<br />
16. This is a sample text
<br />
17. This is a sample text
<br />
18. This is a sample text
<br />
19. This is a sample text
<br />
20. This is a sample text
<br />
21. This is a sample text
<br />
22. This is a sample text
<br />
23. This is a sample text
<br />
24. This is a sample text
<br />
25. This is a sample text
<br />
</div>
<hr />
<input type="hidden" id="div_position" name="div_position" />
<asp:Button Text="Submit" runat="server" />
JavaScript to maintain the Scroll Position of HTML DIV on PostBack
The
OnScroll event handler has been attached to the
HTML DIV so that when it is scrolled, its scroll position can be retrieved and saved inside the
HTML HiddenField.
When the Button is clicked and the form is submitted i.e. on PostBack, the value of the HiddenField is posted to the server which can be retrieved using the Request Form collection by supplying the name of the HiddenField.
Inside the window onload event of the page, the value of the
HiddenField is retrieved from the
Request Form collection, the extracted value is the scroll position of the
HTML DIV saved earlier and is now used to set the scroll position of the
HTML DIV.
Finally, the
HTML DIV always retains its scroll position across
PostBacks.
C#
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById("dvScroll");
var div_position = document.getElementById("div_position");
var position = parseInt('<%= Request.Form["div_position"]%>');
if (isNaN(position)) {
position = 0;
}
div.scrollTop = position;
div.onscroll = function () {
div_position.value = div.scrollTop;
};
};
</script>
VB.Net
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById("dvScroll");
var div_position = document.getElementById("div_position");
var position = parseInt('<%= Request.Form("div_position")%>');
if (isNaN(position)) {
position = 0;
}
div.scrollTop = position;
div.onscroll = function () {
div_position.value = div.scrollTop;
};
};
</script>
Demo
Downloads
