ASP.NET UpdatePanel 非同步回傳後保持捲軸位置

`UpdatePanel` 部分更新導致頁面重繪，捲軸位置重置為頂部。解法：`onscroll` 記錄 `scrollTop` 至 `HiddenField`，`PageRequestManager` 的 `pageLoaded` 事件恢復。

單一區塊版本

<div id="scrollArea" style="height:455px;overflow:auto" onscroll="saveScroll(this)">
  <!-- 列表內容 -->
</div>
<asp:HiddenField ID="hfScroll" runat="server" />

<script>
function saveScroll(el) {
    $get('<%= hfScroll.ClientID %>').value = el.scrollTop;
}

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function() {
    var area = $get("scrollArea");
    var val = $get('<%= hfScroll.ClientID %>').value;
    if (area && val) area.scrollTop = parseInt(val, 10);
});
</script>

多區塊通用版 (放入 MasterPage)

<asp:HiddenField ID="hfGlobalScroll" runat="server" />

<script>
// 記錄：格式 "控件ID|scrollTop"
function saveScroll(el) {
    var hf = $get('<%= hfGlobalScroll.ClientID %>');
    if (hf) hf.value = el.id + "|" + el.scrollTop;
}

// 恢復
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function() {
    var hf = $get('<%= hfGlobalScroll.ClientID %>');
    if (!hf || !hf.value) return;
    var parts = hf.value.split("|");
    if (parts.length === 2) {
        var target = $get(parts[0]);
        var top = parseInt(parts[1], 10);
        if (target && !isNaN(top)) target.scrollTop = top;
    }
});
</script>

使用時：任意可捲動容器加上 `id` 與 `onscroll="saveScroll(this)"` 即可。

關鍵點

• `$get` 為 `Sys.UI.DomElement.getElementById` 簡寫，相容 `ClientID` 命名容器。
• `pageLoaded` 在每次非同步回傳完成觸發，含初始載入。
• 若使用 `MaintainScrollPositionOnPostback="true"` (頁面指令)，全頁回傳會自動維持，但 `UpdatePanel` 部分更新不生效，需本法補足。
• 若容器在 `UpdatePanel` 內，`onscroll` 事件在回傳後會重新綁定，無需額外處理。

替代方案

• CSS `scroll-anchoring`：現代瀏覽器支援 `overflow-anchor: auto` (預設開啟)，可減少內容插入導致的跳動，但無法解決整個面板重繪的位置重置。
• UpdatePanel `ChildrenAsTriggers="false"` + 手動 `Update()`：精確控制更新範圍，減少不必要重繪。
• 前端框架 (Vue/React) + API：徹底避免 PostBack 模式，狀態由前端管理，捲軸位置自然保持。