如何保持自动回发的滚动位置？答案

【问题标题】：How to maintain scroll position on autopostback?如何保持自动回发的滚动位置？
【发布时间】：2011-02-28 21:46:26
【问题描述】：

我怎样才能回到postback 上页面的相同位置。它似乎总是到达页面顶部。

我尝试过使用 maintainScrollPositionOnPostBack = "true"

但它不起作用。

【问题讨论】：

您能提供一些示例代码吗？
你试过大写“m”吗？它适用于常规回发吗？你把它放在<%@ Page %> 指令中，对吧？
嗨，谢谢你的提问，但我猜 .Focus() 正在工作。还是谢谢

标签： c# asp.net postback

【解决方案1】：

我最近也在寻找这个。想出了一大堆要插入的Javascript，直到我发现以下内容：

在 .aspx 代码文件的顶部，插入以下内容：

 MaintainScrollPositionOnPostback="true"

所以 .aspx 中的第一句话开始

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" AutoEventWireup="true" CodeBehind="Default.aspx.cs"

这对我来说很好用，无需添加任何其他代码来使用更新面板保持滚动条位置

【讨论】：

所以问题具体说这个解决方案不起作用，但它不仅被提出，而且被接受为答案？
@ChristoferOlsson 看起来问题可能是“m”没有大写，如问题的 cmets 部分所示。这对我有用。
另外，如果需要，请查看resetting scroll position。

【解决方案2】：

我使用了几种方法来设置maintainScrollPositionOnPostBack。你试过不止一个吗？您能否描述触发回发的原因以及您测试过哪些浏览器？您使用的是母版页吗？

您可以在页面加载后的代码中设置Page.MaintainScrollPositionOnPostBack = true;。
您可以将其添加到页面声明<%@ Page MaintainScrollPositionOnPostback="true" %>
你可以在web配置文件中添加它<pages maintainScrollPositionOnPostBack="true" />

【讨论】：

【解决方案3】：

当您的页面回发时，您可以将 .Focus() 设置到特定的服务器控件上。

【讨论】：

非常感谢。关于为什么 'maintainScrollPositionOnPostBack = "true" ' 不起作用的任何反馈？
这个问题没有简单的答案。如果没有您的解决方案、在您的环境中等，我认为我无法进行调查。

【解决方案4】：

您是否使用谷歌浏览器进行测试？我遇到了同样的问题，但开始在 IE 和 Firefox 中进行测试并且它正在工作。我认为 Chrome 不支持此属性。它也可能是 .NET Framework 3.5 问题。它可能已在 .NET 4.0 中修复

【讨论】：

我正在使用 .Net framework 2.0...面临同样的问题...有什么替代方案吗？

【解决方案5】：

对我来说最好的解决方案是用更新面板包装有问题的控件

<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<ContentTemplate>
dropdown controls that cause postback etc..
</ContentTemplate>
</asp:UpdatePanel>

当然，你也需要

<asp:ScriptManager ID="ScriptManager1" runat="server" />

出现在网站的主窗体中。

【讨论】：

【解决方案6】：

如果您有想要移动到的特定锚点，可以执行here 中描述的操作。否则，您将不得不使用 javascript 并找出您离顶部的距离，将其保存在隐藏字段或 cookie 中，并在页面加载后重置视图。

【讨论】：

【解决方案7】：

虽然 bbbwex 的回复是正确的，但实际上我花了一段时间才意识到我需要在两个位置都放置 MaintainScrollPositionOnPostback="true"

ASPX 页面顶部。
在 IsPostBack 中

两个条件都满足后才有效。

【讨论】：

【解决方案8】：

<script type="text/javascript">    
  var xPos, yPos;
  var prm = Sys.WebForms.PageRequestManager.getInstance();

  function BeginRequestHandler(sender, args) {
    if ($get('<%=Panel1.ClientID%>') != null) {         
      xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
      yPos = $get('<%=Panel1.ClientID%>').scrollTop;
    }
 }

 function EndRequestHandler(sender, args) {
     if ($get('<%=Panel1.ClientID%>') != null) {       
       $get('<%=Panel1.ClientID%>').scrollLeft = xPos;
       $get('<%=Panel1.ClientID%>').scrollTop = yPos;
     }
 }
 prm.add_beginRequest(BeginRequestHandler);
 prm.add_endRequest(EndRequestHandler);

在ScriptManager标签中添加上述代码并在页面声明中添加MaintainScrollPositionOnPostback="true"

【讨论】：

【解决方案9】：

注意：如果您定义了默认控件，即使 Page MaintainScrollPositionOnPostback="true" 也会在回发时滚动到该控件

【讨论】：

【解决方案10】：

确保您不要在<form id="form1" runat="server" defaultbutton="YourDefaultButton"> 中设置默认按钮。删除defaultbutton="YourDefaultButton" 和MaintainScrollPositionOnPostback="true" 即可。

【讨论】：

【解决方案11】：

来自这个问题：Maintain Panel Scroll Position On Partial Postback ASP.NET

我几天来一直在寻找这个问题的答案，使用典型的替代方法 MaintainScrollPositionOnPostback 和使用 BeginRequestHandler 和 EndRequestHandler 的 JavaScript 解决方案，在我的例子中我使用 MasterPage。

没有任何效果，但是我想出了一个相当简单的解决方案，使用 jQuery 与 BeginRequestHandler 和 EndRequestHandler 使用相同的 @waqas-raja 算法：

<script type="text/javascript">

    var scrollPosition = 0;

    $(document).ready(function () {

        $(window).scroll(function (event) {
            scrollPosition = $(window).scrollTop();
        });

    });

</script>

<script type="text/javascript">

    // It is important to place this JavaScript code after ScriptManager1
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    function BeginRequestHandler(sender, args) {
        console.log('BeginRequest');
    }

    function EndRequestHandler(sender, args) {
        $(window).scrollTop(scrollPosition);
    }

    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);

</script>

这个想法是在每次用户移动 Scroll 时在全局变量中捕获 Scroll 的位置，这样就知道哪个是最后一个位置，并且在进行回发时输入 EndRequestHandler 事件并使用用户标记的最后位置

这在 Firefox 和 Google Chrome 中对我有用 :)

【讨论】：

【解决方案12】：

试试这个。它对我有用。

<script type="text/javascript">
  window.onload = function () {
               var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
               document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;
              }
   function SetDivPosition() {
           var intY = document.getElementById("<%=scrollArea.ClientID%>").scrollTop;
           var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
           h.value = intY;
     }

  function afterpostback() {

            var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
            document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;

     }

</script> 

 <asp:HiddenField ID="hfScrollPosition" runat="server" Value="0" />
 <div id="scrollArea" onscroll="SetDivPosition()"   runat="server"  style="height:225px;overflow:auto;overflow-x:hidden;">

if (Page.IsPostBack) {
ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "CallJS", "afterpostback();", true);
}

【讨论】：