如何向下滚动到多行TextBox的底线，Javascript的scrollIntoView无法正常工作 [英] How can I scroll down to a multiline TextBox's bottom line, Javascript's scrollIntoView is not working for this

问题描述

我正在尝试创建一个基本的视频和文字聊天网站。在房间页面中，我将视频作为flash和文本框（多行）显示发送到房间的所有消息和一个文本框供用户键入和通过单击旁边的按钮发送

I am trying to create a basic video and text chat web site.In the room page I have the video as flash and a textbox(multiline) which shows all the messages sent to the room and one textbox for users to type and send by clicking the button beside it

<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 时，没有闪烁发生。

Above is my code, all those controls are in an UpdatePanel so when user clicks BttnGonder that no flickers happens.

当用户按下按钮时，他输入的内容将在下面的方法中汇总为 TxtBxOdaMesajlari > BttnGonder_click 。

When user presses the button what he typed is concataned to TxtBxOdaMesajlari in the below method called BttnGonder_click.

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 没有自动滑动/向下滚动。我搜索了这个并找到了这个例子使用ASP.NET 2.0和AJAX的多用户聊天室它使用Javascript的 scrollIntoView（）所以我决定使用它，但页面变得闪烁，滚动根本不起作用。也许我使用错误的控件或错误的方法。
我正在使用ASP.NET 4.0，如果这很重要。

Well after a number of messages scrollbars appear TxtBxOdaMesajlari can be seen , however the new messages cannot be seen because TxtBxOdaMesajlari does not slide/scroll down automatically.I searched about this and found this example Multi User Chat Room Using ASP.NET 2.0 and AJAX it uses Javascript's scrollIntoView() so I decided to use it but the page gets flickered and scrolling does not work at all.Maybe I am using the wrong control or the wrong way to do is. I am using ASP.NET 4.0 if that matters a lot.

关于aspx文件

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

我正在使用 ScriptManager.RegisterStartupScript 因为控件位于 UpdatePanel 中，因为它建议并在接受的答案按用户：3742的 JavaScript功能无效。

I am using ScriptManager.RegisterStartupScript because the controls are in an UpdatePanel as it was suggested and worked fine at Accepted answer by user:3742 of JavaScript function is not working.

推荐答案

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

scrollIntoView is used to scroll the textbox itself into view, not its contents.

要滚动到文本框的末尾，您可以使用：

In order to scroll to the end of the textbox, you can use:

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

这篇关于如何向下滚动到多行TextBox的底线，Javascript的scrollIntoView无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！