ASP.NET 魔法學院

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"> <!-- theForm.oldSubmit = theForm.submit; theForm.submit = WebForm_SaveScrollPositionSubmit; theForm.oldOnSubmit = theForm.onsubmit; theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit; theForm.oldOnLoad = window.onload; window.onload = WebForm_RestoreScrollPosition; // --> </script>

當頁面 Submit 時會利用 WebForm_SaveScrollPositionSubmit 函式來記錄頁面目前的水平及垂直捲軸位置，將水平捲軸位置記錄於 "__SCROLLPOSITIONX" 這個 HiddenField，垂直捲軸位置記錄於 "__SCROLLPOSITIONY" 這個 HiddenField。

而 PostBack 後頁面重新載入後，會利用 WebForm_RestoreScrollPosition 函式來回復頁面捲軸位置，也就是將記錄在 "__SCROLLPOSITIONX" 及 "__SCROLLPOSITIONY" 這二個 HiddenField 的值，重新設定頁面的水平及垂直捲軸位置，如此就達到維護頁面捲軸位置的動作了。

ASP.NET 魔法學院