how to scroll asp.net textbox to bottom

2019-01-27 10:18发布

站内问答 / 后端开发
1206 3 6

I'm building a website with text box containing log messages. the log is getting updated using AJAX. 

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
    <ContentTemplate>
        <asp:TextBox ID="TextBox1" runat="server"                                 
            onload="textbox_load"
            Height="110px" 
            TextMode="MultiLine"             
            Width="100%">
        </asp:TextBox>    
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>

I need to scroll the text box down every time it gets updated. How?

3条回答
成全新的幸福
2楼-- · 2019-01-27 10:37

Try some plain javascript. Here's a sample I think you can modify to work in your scenario:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>

  <script type="text/javascript">
    function scrollDown() 
    {
      document.getElementById('<%=TextBox1.ClientID%>').scrollTop = document.getElementById('<%=TextBox1.ClientID%>').scrollHeight;
    };
  </script>

</head>
<body>
  <form id="form1" runat="server">
  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  </form>
</body>
</html>

You just have to figure out how to call the scrollDown method...

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
3楼-- · 2019-01-27 10:37

Why dont you try this simple example:

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) {

            Page.ClientScript.RegisterStartupScript(this.GetType(),
            "ScrollTextbox",
            "<script type=\"text/javascript\">document.getElementById('" +
            this.TextBox1.ClientID +
            "').scrollTop = document.getElementById('" +
            this.TextBox1.ClientID +
            "').scrollHeight; " +
            " </script>");
        }
    }

Just change TextBox1 parameter with your text box name. You can see that the content in the text box is scrolled to bottom.

You can call this java script after AJAX is refreshing the content of your text box.

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
4楼-- · 2019-01-27 10:43

Handle the Sys.WebForms.PageRequestManager.endRequest event and scroll the textbox down:

var tbox = $get('<%= TextBox1.ClientID %>');
tbox.tbox.scrollTop = tbox.scrollHeight;
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)