在页面回传（ASP.NET）后保持Div滚动条位置

Question

我有一个如下所示的div：

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

我有一个包含几百条记录的列表，并允许我选择其中一项以填充下方的表单视图控件。

问题是，当页面提交后，滚动条位置会回到div顶部。我想尝试保持其位置，使所选记录仍然可见。

有什么想法吗？

- Dkong

Answer 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;
}

- FlySwat

---

我发现需要使用 var hdnScroll = document.getElementById('hdnScrollPos'); 而不是所示的代码，还是非常感谢。 - Brian Hooper

如果您已经全局禁用了ViewState，请记得添加ViewStateMode="Enabled"。 - bertasoft

Answer 2

以下是一种更精细的使用JQuery的FlySwat解决方案，对我很有效：

    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());
    }

- LinkedWith

Answer 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中。另一个（更好的？）选项是将其存储在隐藏字段（或字段）中。希望这能帮助到你...

- Dan Diplo

Answer 4

ASP.NET已经内置了这个功能，你只需要在页面指令中包含MaintainScrollPositionOnPostback即可。

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

- simpleblue

---

我怀疑这个在嵌入式div上是否有效，只适用于主页面。 - FlySwat

是的，我不确定这个方法是否适用于页面内包含的 DIV。虽然我还没有尝试过。 - Chris Pietschmann

FYI，这似乎只适用于早期版本的IE。 - Mmm

这仅适用于主页面，而不适用于嵌入的div。 - Raphael Mutiso

Answer 5

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

如果您担心onscroll事件在opera/ff中无法正常工作，可以尝试更改

thebody.onscroll=SaveScrollLocation;

到

setInterval('SaveScrollLocation()", 500);

- mangokun

Answer 6

我尝试了上述所有方法，但在Chrome v39中没有一个令人满意的效果。然而，本页面使用的方法非常成功：

在ASP.Net中PostBack后保持DIV的滚动位置

- Myke Black

Answer 7

<asp:HiddenField ID="hfScroll" runat="server" ClientIDMode="Static" />

<script>
        $(document).ready(function () {
            ScrollMaintain();
            $(window).scroll(function () {
                $('#hfScroll').val($(window).scrollTop());
            });

        function ScrollMaintain() {
            var scroll = $('#hfScroll').val();
            scroll = (scroll == '' ? '0' : scroll);
            $(window).scrollTop(scroll);
        }
    </script>

- Ravi Sharma