2011-12-15 27 views
3

我想创建一个基本的视频和文本聊天网站。在房间页面我有视频作为Flash和文本框(多),其示出了所有发送给房间内的消息和对用户一个文本框键入并通过点击按钮来发送它旁边如何向下滚动到多行文本框的底线,Javascript的scrollIntoView不起作用为此

<tr> 
    <td> 
     <asp:UpdatePanel ID="UpdtPnlMesajlar" runat="server" EnableViewState="true"> 
       <ContentTemplate> 
         <table> 
          <tr> 
           <td> 
            <asp:TextBox ID="TxtBxOdaMesajlari" 
             runat="server" ReadOnly="true" 
             TextMode="MultiLine" 
             Width="475" Height="100" > 
            </asp:TextBox> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <asp:TextBox ID="TxtBxMesaj" runat="server" 
             Width="412"></asp:TextBox> 
            <asp:Button ID="BttnGonder" runat="server" 
             Text="Gönder" Width="55" 
             OnClick="BttnGonder_click"/> 
           </td> 
          </tr> 
         </table> 
       </ContentTemplate> 
      </asp:UpdatePanel> 
     </td> 
    </tr> 

以上是我的代码,所有的这些控制是在一个UpdatePanel所以当用户点击BttnGonder没有闪烁发生。

当用户按下按钮时,他键入的内容在下面的方法BttnGonder_click中被简化为TxtBxOdaMesajlari

protected void BttnGonder_click(object sender, EventArgs e) 
     { 
      string uyeId = Session["UyeId"].ToString(); 
      string mesaj = uyeId + " : " + TxtBxMesaj.Text; 
      TxtBxOdaMesajlari.Text = TxtBxOdaMesajlari.Text + Environment.NewLine + mesaj; 
      ScriptManager.RegisterStartupScript(this, this.GetType(), "txtbxmesajlarslide", "buttonClicked();", true); 

     } 

好以后出现TxtBxOdaMesajlari可以看出一些信息滚动条,但是新邮件不能被看到,因为TxtBxOdaMesajlari不会滑动/向下滚动automatically.I搜索关于这一点,并发现这个例子Multi User Chat Room Using ASP.NET 2.0 and AJAX它使用JavaScript的scrollIntoView()所以我决定使用它,但页面闪烁,滚动根本不起作用。也许我使用了错误的控件或者错误的方法。 如果这很重要,我正在使用ASP.NET 4.0。

在aspx文件

<script language="javascript" type="text/javascript"> 
    function buttonClicked() { 
       $get("TxtBxOdaMesajlari").scrollIntoView("true"); 
      } 
</script> 

我使用ScriptManager.RegisterStartupScript,因为控制处于UpdatePanel因为有人建议,并通过用户在Accepted answer工作得很好:的JavaScript function is not working 3742。

回答

1

scrollIntoView用于将文本框自身滚动到视图中,而不是其内容。

为了滚动到文本框的末尾,你可以使用:

function buttonClicked() { 
    var textBox = $get("TxtBxOdaMesajlari"); 
    textBox.scrollTop = textBox.scrollHeight; 
} 
+0

谢谢你,我不知道有这样的事情,它的工作原理。 – Bastardo 2011-12-16 07:01:29

相关问题