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>

只需在您的更新面板中使用此替换您的脚本块，您应该能够保留原样。

.Net聊天应用程序

1 个答案: