Question

我为网络聊天创建了一个简单的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>

Answer 1

不知道关于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（）持续时间设置为1ms。

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

window.location.href = "#msgID";

但是我不确定它在可滚动的div中是如何工作的，你将不得不测试它。

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

Answer 2

由于问题与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刷新后保持div滚动位置

2 个答案: