如何向下滚动到多行 TextBox 底线，Javascript scrollIntoView 不适用于此

Posted 2023-02-23

【中文标题】如何向下滚动到多行 TextBox 底线，Javascript scrollIntoView 不适用于此

【英文标题】：How can I scroll down to a multiline TextBox's bottom line, Javascript's scrollIntoView is not working for this

【发布时间】：2011-12-15 15:29:22

【问题描述】：

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

<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 不会自动滑动/向下滚动。我搜索了这个并找到了这个例子 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 中，正如JavaScript function is not working 的用户：3742 的Accepted answer 所建议并在Accepted answer 处正常工作。

【参考方案1】：

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

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

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