从更新面板异步回发后保持滚动位置

Posted 2023-02-22

【中文标题】从更新面板异步回发后保持滚动位置

【英文标题】：Maintain scroll position after async postback from update panel

【发布时间】：2011-09-28 20:04:23

【问题描述】：

我在使用 asp.net 和更新面板时遇到了一些问题。问题是，每次从更新面板发生部分回发时，页面都会滚动回顶部。在我的大多数页面上，这不是什么大问题，但在某些页面上可能会变得很长。然后，当用户位于页面底部时，我会在其中显示带有 RadListView 的 jQuery 弹出窗口，用户可以在此列表中选择元素。但是点击这个元素会导致部分回发，页面跳回顶部。

我浏览了互联网，但找不到任何解决问题的方法。当然设置MaintainScrollPositionOnPostback 什么都不做。

有没有人知道任何可以帮助我解决这个问题的方法？

干杯， 帕科

【问题讨论】：

复制：***.com/questions/5288682/…

…或Reset scroll position after Async postback - ASP.NET

【参考方案1】：

在repeater中使用一些控件的ID，回发完成后使用JQuery滚动。

您可以根据它们生成的格式获取某些控件的 ID。

【参考方案2】：

有一个小解决方法，我很久以前在 ERP 中使用过。不确定这是否是最佳解决方案，但它确实有效。

我不知道您是使用自定义 Page 类还是默认的 System.Web.UI.Page 类，但是，我会尝试向您解释您是如何做到的，然后您会找到实现它的最佳方式在你的环境中，好吗？

您将创建一个HiddenField，例如，ID 为“hfScrollPosition”。

然后，您将创建一个 javascript 事件：document.onscroll 或类似的东西，并在事件内部更新隐藏字段以获取当前滚动位置。例如： document.getElementById("hfScrollPosition").value = document.documentElement.scrollTop;

这样做，您将有一个 ASP.NET 控件根据主体滚动位置动态更新其值。因此，当您页面中的某些控件进行回发时，您可以在 Page_Load 事件中添加以下 javascript 代码：

document.documentElement.scrollTop = document.getElementById("hfScrollPosition").value;

因此，每次您的页面获得回发时，正文滚动位置都会正确更新。

---

编辑：我做了一个小提琴来模拟它： https://jsfiddle.net/j26fpgzo/