ajax刷新后保持div滚动位置答案

【问题标题】：Maintain div scroll position after ajax refreshajax刷新后保持div滚动位置
【发布时间】：2016-11-07 06:24:32
【问题描述】：

我为网络聊天创建了一个普通的 asp.net 应用程序。

每次聊天框 (div) 刷新后，它都会滚动到顶部。我想将它保持在当前位置。

试过了，但是做错了。在 windows.load 中获取 var div 和“hdndiv”值 null。帮帮我！！

<script>

window.onload = function () {
    debugger;
    var div = document.getElementById("divMessages");
    var hdndiv_position = document.getElementById("hdndiv_position");
    var position = parseInt('<%=Request.Form["hdndiv_position"] %>');
    if (isNaN(position)) {
        position = 0;
    }
    div.scrollTop = position;
    div.onscroll = function () {
        div_position.value = div.scrollTop;
    };
};

<table style="width: 100%" cellpadding="0" cellspacing="0">
<tr>
    <td style="padding-left: 10px; padding-right: 10px; padding-bottom: 5px;">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div id="divMessages" style="width: 100%; height: 300px; table-layout: fixed; word-wrap: break-word; border: 1px solid #ddd; overflow: scroll; " runat="server">
                </div>
                <asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">
                </asp:Timer>
            </ContentTemplate>
        </asp:UpdatePanel>
    </td>
</tr>
<tr>
    <td>
        <asp:Label ID="lblError" ForeColor="Red" runat="server" />
        <asp:HiddenField ID="hdnFromUserId" Value="-1" runat="server" />
        <asp:HiddenField ID="hdnFromUserName" Value="" runat="server" />
        <asp:HiddenField ID="hdnToUserId" Value="-1" runat="server" />
        <asp:HiddenField ID="hdnToUserName" Value="" runat="server" />
        <asp:HiddenField ID="hdnScrollPos" Value="" runat="server" />
        <asp:HiddenField ID="hdndiv_position" Value="" runat="server" />
    </td>
</tr>
<tr>
    <td style="padding: 10px;">
        <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td style="padding-right: 10px;">
                    <asp:TextBox ID="txtChat" TextMode="MultiLine" Rows="2" Width="100%" runat="server" />
                </td>
                <td style="width: 80px;">
                    <asp:Button ID="btnSend" CssClass="btn" Text="Send" OnClick="btnSend_Click" runat="server" /></td>
            </tr>
        </table>
    </td>
</tr>

【问题讨论】：

并且没有 id 为 "hdndiv" 的元素。所以我猜你是空的。只需检查一次

标签： javascript html asp.net

【解决方案1】：

由于问题与 asp.net 相关，在网络表单中，您可以使用以下属性维护该特定页面的滚动位置：

在页面指令中你需要设置MaintainScrollPositionOnPostback

例如：

MaintainScrollPositionOnPostback="true"

Page Attribute 如下所示

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

编辑：更新面板请参考以下链接

https://basgun.wordpress.com/2008/06/09/maintain-scroll-position-updatepanel-postback/

内容取自以上链接

【讨论】：

如前所述，他正在使用 ajax。不将整个页面回发到服务器。所以只要元素的 HTML 没有更新。它不应该回到初始位置
试过但没用。在运行时， div 标签的 id 正在改变，如果我尝试使用... function BeginRequestHandler(sender, args) { debugger; var div = document.getElementById(); if (div!=null && div.innerHTML != null) { XPos = div.scrollLeft; yPos = div.scrollTop;我通过 divMessages.clientid 获取 id，但我仍然在 var div 中获取 document.getElementById() 为 null ..
@rahuldesai 您需要像var div = document.getElementById("<%= divMessages.ClientID %>"); 这样访问 div，因为您错过了 id 中的引用
@rahuldesai NP 乐于提供帮助

【解决方案2】：

对asp.net一无所知，但这是我如何帮助另一个stackoverflow用户的：

http://jsfiddle.net/jzfn7mun/1/

$('.target').stop().animate({
    scrollTop: $('.icon-box.active').offset().top - 
        $('.icon-box.active').parent('div').position().top
});

您可以使用 :last-child 选择器来做同样的事情，并将 animate() 持续时间设置为 1 毫秒。

您还可以做的是刷新聊天框，为最后一条消息提供一个 ID，然后使用

window.location.href = "#msgID";

但我不确定它如何在可滚动的 div 中工作，您必须对其进行测试。

希望你能在这些方面取得一些进步！

【讨论】：