Question

我创建了一个聊天应用程序。当我向文本框添加内容并单击输入文本时添加到数据库并滚动条上升。我使用javascript向下滚动点击哪个工作正常但由于计时器，滚动条移动到顶部很快被拖下来。我的代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<style type="text/css">
#kdiv1
{
    position:relative;
    left:300px;
    top:20px;
    height:400px;
    width:400px;
    overflow:auto;
}
#kdiv2
{
    position:relative;
    top:100px;
    left:300px;
}
</style>
    <script type="text/javascript">
    function scrooldown(div) {
        var scrollDiv = document.getElementById(div);
        scrollDiv.scrollTop = scrollDiv.scrollHeight;
        scrollDiv = null;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server" defaultfocus="text">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">

        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true" RenderMode="Block">
        <Triggers>
        <asp:AsyncPostBackTrigger ControlID="button1" EventName="Click" />
        </Triggers>
        <ContentTemplate>
        <div id="kdiv1">
           <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
            <span>
             <%# DataBinder.Eval(Container.DataItem, "Message") %> <br />
            </span>
            </ItemTemplate>
            </asp:Repeater>
        </div>
            <div id="kdiv2">
            <asp:TextBox ID="text" runat="server"/>
            <asp:Button ID="button1" runat="server" onclick="button1_Click" OnClientClick="scrooldown('kdiv1')" />
            </div>
        </ContentTemplate>
        </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

C＃代码

protected void button1_Click(object sender, EventArgs e)
    {
        string MyConString = "DRIVER={MySQL ODBC 3.51 Driver};" + "SERVER=localhost;" + "DATABASE=chatserver;" + "UID=root;" + "PASSWORD=********;" + "OPTION=3";
        OdbcConnection MyConnection = new OdbcConnection(MyConString);
        try
        {
            OdbcCommand cmd = new OdbcCommand("INSERT INTO shoutbox(name, message)VALUES(?, ?)", MyConnection);
            cmd.Parameters.Add("@email", OdbcType.VarChar, 255).Value = "something";
            cmd.Parameters.Add("@email", OdbcType.Text).Value = text.Text;
            MyConnection.Open();
            cmd.ExecuteNonQuery();
            MyConnection.Close();
        }
        catch
        {
        }
        try
        {
            MyConnection.Open();
            OdbcCommand cmd = new OdbcCommand("Select message from shoutbox", MyConnection);
            OdbcDataReader dr = cmd.ExecuteReader();
            ArrayList values = new ArrayList();
            while (dr.Read())
            {
                string ep = dr[0].ToString();
                values.Add(new PositionData(ep));
            }
            Repeater1.DataSource = values;
            Repeater1.DataBind();
            text.Text = "";
            UpdatePanel1.Update();
        }
        catch
        {

        }
    }
}

Answer 1

如果您在kdiv1而不是内部移动div UpdatePanel，您将获得更好的结果：

<div id="kdiv1">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true" RenderMode="Block">
        ...
    </asp:UpdatePanel>
</div>

当前情况的问题是div kdiv1本身将在每次部分回发后被替换，并且其所有状态（如滚动位置）都将丢失。

但是，即使在此更改之后，您仍然会遇到部分回发后添加的行不在可见区域内的问题，因为这些新行将在最后一次调用{{}之后添加。 {1}}。

要解决此问题，您可以在每次发生部分回发时注册要调用的函数。您可以通过将以下javascript添加到页面标题来执行此操作：

scrolldown('kdiv1')

注意：在我的例子中，我写了“scrolldown”而不是“scrooldown”，因为我认为这是一个错字。

用计时器滚动回来

1 个答案: