In this article I will explain 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
In the below HTML markup I have an 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
An 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.
Thus 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
