页面回发后保持 Div 上的滚动位置 (ASP.NET)答案

【问题标题】：Maintain scroller position on Div after page postback (ASP.NET)页面回发后保持 Div 上的滚动位置 (ASP.NET)
【发布时间】：2009-07-26 13:20:47
【问题描述】：

我有一个这样的 div：

<div style="overflow-y: scroll; height: 260px">

我包含几百条记录，并允许我选择一个项目来填充它下面的 formview 控件。

问题是当页面回发时，滚动条的位置会回到 div 的顶部。我想尝试保持其位置，以便所选记录仍然可见。

有什么想法吗？

【问题讨论】：

标签： asp.net javascript

【解决方案1】：

放置类似：

 <asp:HiddenField id="hdnScrollPos" runat="server"/> in your aspx.

然后，一些 javascript 像：

var hdnScroll = document.getElementById(<%=hdnScrollPos.ClientID%>);
var bigDiv = document.getElementById('bigDiv');
bigDiv.onscroll = function() {
     hdnScroll.value = bigDiv.scrollTop;
}

window.onload = function () { 
    bigDiv.scrollTop = hdnScroll.value;
}

【讨论】：

我发现有必要使用var hdnScroll = document.getElementById('hdnScrollPos'); 而不是显示的那样，但同样感谢。
如果你全局禁用了 ViewStateMode="Enabled" 记得放

【解决方案2】：

这是 FlySwat 使用 JQuery 的更精致的解决方案，对我有用：

    var $ScrollPosition = $('#hfScrollPosition');
    var $ScrollingDiv = $('#pnlGroupDataContent');
    if ($ScrollPosition.length && $ScrollingDiv.length) {
        // Store scrolling value
        $ScrollingDiv.scroll(function () {
            $ScrollPosition.val($ScrollingDiv.scrollTop());
        });
        // Set scrolling
        $ScrollingDiv.scrollTop($ScrollPosition.val());
    }

【讨论】：

【解决方案3】：

免责声明 - 不是我的代码，但我以前见过这个：

window.onload = function(){
    var strCook = document.cookie;
    if(strCook.indexOf("!~")!=0){
      var intS = strCook.indexOf("!~");
      var intE = strCook.indexOf("~!");
      var strPos = strCook.substring(intS+2,intE);

      document.getElementById("divTest").scrollTop = strPos;
      document.getElementById("divTest").scrollTop = strPos;
    }
  }
  function SetDivPosition(){
    var intY = document.getElementById("divTest").scrollTop;

    document.cookie = "yPos=!~" + intY + "~!";
  }

这个想法是将滚动条的位置存储在 cookie 中。另一个（更好？）选项是将其存储在隐藏字段（或多个字段）中。希望这能让你继续前进......

【讨论】：

【解决方案4】：

ASP.NET 内置了此功能，您只需在页面指令中包含 MaintainScrollPositionOnPostback。

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>

【讨论】：

我怀疑它适用于嵌入式 div，一般来说只是主页。
是的，我不确定这是否适用于页面中包含的 DIV。虽然我没试过。
仅供参考，这似乎只适用于早期版本的 IE。
这仅适用于主页，不适用于嵌入式 div。

【解决方案5】：

将thebody 替换为document.getElementById("divTest")

如果担心在opera/ff中onscroll事件不起作用，可以尝试更改

thebody.onscroll=SaveScrollLocation;

到

setInterval('SaveScrollLocation()", 500);

【讨论】：

【解决方案6】：

尝试了以上所有方法，但在 chrome v39 中没有一个能令人满意地工作，但是这个页面上使用的方法非常有效：

Maintain Scroll Position of DIV on PostBack in ASP.Net

【讨论】：