Ajax 更新面板滚动条问题答案

【问题标题】：Ajax update panel scroll bar issueAjax 更新面板滚动条问题
【发布时间】：2009-10-22 10:43:35
【问题描述】：

我有一个更新面板，里面有数据列表。

此更新面板每 1 秒触发一次以从 db 中检索数据。

我将此更新面板保存在启用垂直滚动的 div 标记中。

但是当我得到新数据时，滚动条没有自动调整！！！

我尝试过维护滚动回选项，但它不起作用。

更新面板触发后，是否有任何选项可以将滚动条保持在原始位置？

【问题讨论】：

标签： ajax updatepanel scrollbar asynchronous-pages

【解决方案1】：

请试试这个：

<script>
  var prm = Sys.WebForms.PageRequestManager.getInstance();
  prm.add_beginRequest(function(){
     window.dTop = document.getElementById('divIdHere').scrollTop;
  });

  prm.add_endRequest(function(){
       setTimeout(function(){
         document.getElementById('divIdHere').scrollTop = window.dTop;
      },100);
  });
</script>

【讨论】：

【解决方案2】：

这是我更喜欢避免使用 JavaScript，它需要在每次刷新/更新时调整滚动位置...

我猜你一定设计了如下页面

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional/Always">
    <ContentTemplate>
        <div style="height: 400px/300px; overflow-y:scroll;"> 
            <asp:DataList ID="DataList1" runat="server">
                ....
            </asp:DataList>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

把它改成这样应该可以解决滚动问题

<div style="height: 400px/300px; overflow-y:scroll;"> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional/Always">
        <ContentTemplate>
                <asp:DataList ID="DataList1" runat="server">
                    ....
                </asp:DataList>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

【讨论】：

在这种情况下，滚动条不会适应@底部添加的新记录。

【解决方案3】：

对于我正在处理的网页，我遇到了同样的问题，其中在面板更新后滚动条不起作用。将 UpdatePanel 标签放在 div 标签内解决了我的问题。

所以，改变下面

<UpdatePanel>
    <ContentTemplate>
         <div>
        </div>
    </ContentTemplate>
</UpdatePanel>

到，

<div>
<UpdatePanel>
    <ContentTemplate>
    </ContentTemplate>
</UpdatePanel>
</div>

【讨论】：