在 PostBack 之后保持网格视图中 div 的滚动条位置答案

【问题标题】：Maintain Scroll Bar position of a div within a gridview after a PostBack在 PostBack 之后保持网格视图中 div 的滚动条位置
【发布时间】：2012-08-23 12:59:12
【问题描述】：

为了在服务器回发后保持滚动条位置，我在 web.config 中使用了以下代码：

<pages maintainScrollPositionOnPostBack="true" >
</pages>

一切正常，但现在我在 div 中封装了一个 gridview，在 div 中有一个滚动条（内部滚动条）。

当网格视图内的某一行发生事件时，内部滚动条不会像外部滚动条那样保持其原始位置。

有什么想法吗？

【问题讨论】：

这是设计使然：该设置仅适用于客户端浏览器中的相同位置。我认为它不会影响在 <DIV> 元素中添加的任何滚动条，例如在您的 Gridview 中。

标签： c# asp.net gridview scroll

【解决方案1】：

供将来参考：

正常的流程是在web.config文件中写如下：

  <system.web>
    <pages maintainScrollPositionOnPostBack="true" >
    </pages>
  </system.web>

这将保留所有网页的滚动条位置。

如果您在 gridview（或 div）中有滚动条，请使用以下脚本：

<script type="text/javascript">
    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("grdWithScroll").scrollTop = strPos;
        }
    }
    function SetDivPosition() {
        var intY = document.getElementById("grdWithScroll").scrollTop;
        document.cookie = "yPos=!~" + intY + "~!";
    }
</script>

并且div必须如下：

<div id="grdWithScroll" …………  onscroll="SetDivPosition()">

http://michaelsync.net/2006/06/30/maintain-scroll-position-of-div-using-javascript-aspnet-20

【讨论】：

onscroll 有时会出现性能问题，因为它会在用户滚动时运行多次。根据导航方法，您可能能够在某些单击事件上调用 SetDivPosition()，以便在离开页面之前只设置一次 cookie。当单击 div 中的任何链接时，我在页面上使用了您的实现，并将其附加如下： $(function () { $('#myDivID a').click(function () { SetDivPosition(); }); });

【解决方案2】：

试试这个，

 <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;">

在 Page_Load 中

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

【讨论】：

【解决方案3】：

我没有很长的解释和任何解释，最重要的部分是这些代码适用于我的项目。

<script  type="text/javascript">
// This Script is used to maintain Grid Scroll on Partial Postback
var scrollTop;
//Register Begin Request and End Request 
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
//Get The Div Scroll Position

function BeginRequestHandler(sender, args) 
{
var m = document.getElementById('divGrid');
scrollTop=m.scrollTop;
}
//Set The Div Scroll Position
function EndRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
m.scrollTop = scrollTop;
} 
</script>

这是来自http://www.codeproject.com/Articles/30235/Maintain-GridView-Scroll-Position-and-Header-Insid

【讨论】：

【解决方案4】：

你可以做你想做的事，但它需要在客户端使用 jQuery 之类的东西来完成。以下教程使用 jQuery 确定 GridView 控件中滚动条的值，然后在每次调用 $(document).ready 函数时恢复该值。通过这种方式，您的滚动条将按照您的意愿重置到回发之前的位置。

Easily maintaining scroll position in GridView using jQuery

【讨论】：

您答案中的链接现在是死链接。您能否扩展您的答案以解释文章的建议？