当前位置： 文江博客话题详情

无法拖动滚动条

发布于 2024-12-06 09:58:30 字数 3882 浏览 2 评论 0原文

下面是聊天脚本。当我尝试向上拖动时，滚动条就会向下拉。如何允许在我的下面的代码中拖动。

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

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

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_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>

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

烈酒灼喉 2024-12-13 09:58:30

我认为解决方案是检测用户当前是否正在滚动浏览器窗口。
如果是，则不要设置滚动位置，否则滚动 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')">

参考链接检测浏览器正在窗口滚动

希望这对您有帮助。

谢谢并问候

严酷的贝德。

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.

回复 原文
紫瑟鸿黎 2024-12-13 09:58:30

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

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

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.

回复 原文
~没有更多了~

关于作者

我爱人

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

⊕婉儿

文章 0 评论 0

ydss

文章 0 评论 0

我纯我任性

文章 0 评论 0

夏末

文章 0 评论 0

来日方长

文章 0 评论 0

mb_AmI35Sdf

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文