How can I scroll down to a multiline TextBox's bottom line, Javascript's scrollIntoView is not working for this

问题

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>

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

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);

        }

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.

On aspx file

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

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.

回答1:

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;
}

来源：https://stackoverflow.com/questions/8522484/how-can-i-scroll-down-to-a-multiline-textboxs-bottom-line-javascripts-scrolli

标签

javascript

ASP.NET

chatroom