解析 Page.MaintainScrollPositionOnPostBack 属性

最新推荐文章于 2014-10-31 10:19:30 发布

shanlingwei

最新推荐文章于 2014-10-31 10:19:30 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

分类专栏： .net 文章标签： WebForm JavaScript ASP.net ASP .net ViewUI

本文链接：https://blog.youkuaiyun.com/shanlingwei/article/details/83460135

.net 专栏收录该内容

15 篇文章

订阅专栏

ASP.NET 的页面执行 PostBack 动作时，页面由伺服端重新传给客户端，而页面的垂直滚动条会跳回最上方，水平滚动条会跳回最左方。
为了解决此情形，只要将 Page 的 MaintainScrollPositionOnPostBack 属性设为 True 时，页面就会自动维护滚动条位置，它是如何实现这个动作的呢？

当把 Page.MaintainScrollPositionOnPostBack = "True" 时，检视 HTML 原始码，可以发现它多了 "__SCROLLPOSITIONX" 及 "__SCROLLPOSITIONY" 这二个 HiddenField，这二个 HiddenField 主要是要来记录页面滚动条的水平及垂直位置。

< input type ="hidden" name ="__SCROLLPOSITIONX" id ="__SCROLLPOSITIONX" value ="0" />
< input type ="hidden" name ="__SCROLLPOSITIONY" id ="__SCROLLPOSITIONY" value ="204" />

页面上也会多了以下这些 JavaScript 程序代码，它主要是透过 WebForm_SaveScrollPositionSubmit 及 WebForm_RestoreScrollPosition 这二个函式来维护页面滚动条位置。

< script type = " text/javascript " >
2

<!--
3

theForm.oldSubmit = theForm.submit;
4

theForm.submit = WebForm_SaveScrollPositionSubmit;
5

theForm.oldOnSubmit = theForm.onsubmit;
7

theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
8

theForm.oldOnLoad = window.onload;
10

window.onload = WebForm_RestoreScrollPosition;
11

// -->
12

< / script>

当页面 Submit 时会利用 WebForm_SaveScrollPositionSubmit 函式来记录页面目前的水平及垂直滚动条位置，将水平滚动条位置记录于 "__SCROLLPOSITIONX" 这个 HiddenField，垂直滚动条位置记录于 "__SCROLLPOSITIONY" 这个 HiddenField。

而 PostBack 后页面重新加载后，会利用 WebForm_RestoreScrollPosition 函式来回复页面滚动条位置，也就是将记录在 "__SCROLLPOSITIONX" 及 "__SCROLLPOSITIONY" 这二个 HiddenField 的值，重新设定页面的水平及垂直滚动条位置，如此就达到维护页面滚动条位置的动作了。