.Net 聊天应用程序

Question

我正在使用 vb.net 和 asp.net 开发聊天应用程序，其中我有一个 div 标签，其中我显示在线用户发布的消息，当消息更多并超过 div 标签的高度时，我的问题是什么我不舒服地查看以前的消息，因为我已将滚动条位置设置为始终指向底部，

为了清楚起见，我已粘贴我的代码，请浏览它并提出您的想法

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="ChatContent" runat="server" style="height: 250px; vertical-align: top; overflow:auto; text-align: left; margin-left: 10px; width: 97%;">
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel3" runat="server"UpdateMode="Conditional">  
    <ContentTemplate> 
        <textarea id="UserInputTextBox" cols="72" rows="3" runat="server" onkeyup="if(event.keyCode == 13) Button2.click();" >
        </textarea> 
         <asp:Button ID="Button2" runat="server" CssClass="button" Text="Send" OnClick="Button2_Click" UseSubmitBehavior="False" />
         <script type="text/javascript">
         Sys.Application.add_load(function() { 
             var t = document.getElementById('ChatContent'); 
             t.scrollTop = t.scrollHeight; 
         });
         </script>
    </ContentTemplate> 
</asp:UpdatePanel>

谢谢

Shakthi

Answer 1

使用 AJAX.NET 时，您可以使用 JavaScript 中的 PageRequestManager 来监视 AJAX 回调是否已完成；具体来说，它是 endRequest 事件。

据我所见，您没有向我们展示您的代码来确保滚动条始终位于底部，但从您的评论看来，它不断向下滚动 div，所以我建议您移动代码的一部分将 div 向下滚动，从您一直使用的任何 setInterval 到 endRequest，并在 endRequest 中包含一个检查以查看值是否已更改：

var contentLength = 0;

var requestMan = Sys.WebForms.PageRequestManager.getInstance();
requestMan.add_endRequest(function() {

    // get a reference to your ChatContent div, by whatever means you prefer
    var container = document.getElementById( /* your ChatContent id */ );

    // this is fired at the end of a javascript callback
    // check if new posts were added in this callback

    if(content.innerHTML.length > contentLength) {

        // update this var, so that the same check won't evaluate to true at next callback
        contentLength = content.innerHTML.length;

        // scroll the div to its bottom, by whichever means you were doing it before
        content.scrollTop = 100000;
    }
});

编辑

根据您的输入，我将修改我的答案，以便它使用您的代码，并且需要尽可能少的更改。你所得到的是不断向下滚动 DIV 的代码，并且你想要更改它，以便仅在 DIV 的内容发生更改时才滚动 DIV：

     <script type="text/javascript">
     var contentLength = 0; // add this global var
     Sys.Application.add_load(function() { 
         var t = document.getElementById('ChatContent'); 

         if(t.innerHTML.length > contentLength) // <- add a condition here
             t.scrollTop = t.scrollHeight; 
     });
     </script>

只需在 updatepanel 中用此替换脚本块，你应该能够让其余部分保持原样。