Question

以下是聊天脚本。当我试图向上拉动滚动条时，拉下来。如何允许拖动我的下面的代码。

还有其他方法可以让我的代码更好并允许滚动。

的Default.aspx

<!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>
</head>
<body>
    <form id="form1" runat="server">
        <div id="div1" style="height:400px; width:400px; overflow:auto; z-index:1">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick" />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <div id="div2" style="height:300px; width:350px">
                <asp:BulletedList ID="BulletedList1" runat="server" />
                </div>
                <div id="div4" style="position:absolute; left:500px; bottom:50px; z-index:10">
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
                </div>
                </div>
            </ContentTemplate>
            </asp:UpdatePanel>
            <div id="div5" style="position:absolute; left:100px; bottom:50px; z-index:10">
            <asp:TextBox ID="TextBox1" runat="server"/>
            </div>
    </form>
    <script type="text/javascript">
        function _SetChatTextScrollPosition() {
            var chatText = document.getElementById("div1");
            chatText.scrollTop = chatText.scrollHeight;
            window.setTimeout("_SetChatTextScrollPosition()", 1);
        }

        window.onload = function () {
            _SetChatTextScrollPosition();
        }
        </script>
</body>
</html>

服务器代码

    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Timer1_Tick(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);
        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));
            BulletedList1.DataSource = values;
            BulletedList1.DataTextField = "Message";
            BulletedList1.DataBind();
        }
    }
    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);
        OdbcCommand cmd = new OdbcCommand("INSERT INTO shoutbox(name, message)VALUES(?, ?)", MyConnection);
        cmd.Parameters.Add("@name", OdbcType.VarChar, 255).Value = "gimp";
        cmd.Parameters.Add("@message", OdbcType.Text).Value = TextBox1.Text;
        MyConnection.Open();
        cmd.ExecuteNonQuery();
        MyConnection.Close();
    }
}
public class PositionData
{
    private string name;

    public PositionData(string name)
    {
        this.name = name;
    }

    public string Message
    {
        get
        {
            return name;
        }
    }
}

Answer 1

我认为解决方案是检测用户当前是否正在滚动浏览器窗口。如果是，则不设置滚动位置，否则请滚动div元素。

Javascript更改

var isScrolling;
document.observe('user:scrolling', function() { isScrolling = true; });

function _SetChatTextScrollPosition() {
      if(!isScrolling) {
            var chatText = document.getElementById("div1");
            chatText.scrollTop = chatText.scrollHeight;
            window.setTimeout("_SetChatTextScrollPosition()", 1);
      }
      isScrolling = false;
}

HTML更改

<body onscroll="document.fire('user:scrolling')">

Reference link to detect the browser being window scrolled

希望这会对你有所帮助。

谢谢和问候

Harsh Baid。

Answer 2

你的滚动不起作用，因为每1毫秒你要告诉它滚动到div1的底部（这就是你的_SetChatTextScrollPosition()函数的作用）。由于您的超时等待时间太短，因此只要您放开滚动条，它就会再次向下滚动。

所以，如果你想要能够向上滚动，你要么必须停止使用这个功能，要么将超时间隔设置为更长的时间（以毫秒为单位，所以1000 == 1秒），这样你就可以至少有机会滚动并看之前它会把你踢回底部。

无法拖动滚动条

2 个答案: