Unable to drag my scroll bar_问答_开发者_运维开发者技术经验分享

The below is chat script. When ever I try to drag up the scroll bar is pulling down. How to allow dragging in my below code.

Is there any other way to make my code better and to allow scrolling.

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_Clic开发者_StackOverflow中文版k" />
                </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>

Server code

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

I think the solution will be to detect if browser window is being scrolled currently by user. If yes then don't set the scroll position, other wise do scroll the div element.

Javascript changes

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 changes

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

Reference link to detect the browser being window scrolled

Hope this helps you.

Thanks and Regards

Harsh Baid.

Your scrolling is not working because every 1 millisecond you are telling it to scroll to the bottom of your div1 (that's what your _SetChatTextScrollPosition() function does). Since your timeout wait time is so short, as soon as you let go of the scrollbar, it's going to scroll it down again.

So, if you want to be able to scroll up, you'll either have to stop using this function, or set the timeout interval to something longer (it's in milliseconds, so 1000 == 1 second) so that you at least have a chance to scroll and look before it kicks you back to the bottom.