无法拖动我的滚动条

以下是聊天脚本。当我尝试拖动滚动条向下拉时。如何允许拖拽我的下面的代码。无法拖动我的滚动条

是否有任何其他方式使我的代码更好，并允许滚动。

的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代码

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

来源

2011-09-24 Mal

我的回答对你有帮助吗？ http://stackoverflow.com/questions/7538005/unable-to-drag-my-scroll-bar/7620173#7620173 –

您滚动不工作，因为每隔1毫秒你告诉它滚动到你的DIV1的底部（这是你的_SetChatTextScrollPosition()功能一样）。由于您的超时等待时间非常短，只要松开滚动条，就会再次将其向下滚动。因此，如果您想要向上滚动，您将不得不停止使用此函数，或者将超时间隔设置为更长的时间（以毫秒为单位，因此1000 == 1秒），以便您至少有机会滚动，然后再看它将你踢回底部。

来源

2011-09-26 14:58:27 patmortech

我的问题是如何滚动。不要延迟滚动。滚动条应完全在我的控制下，而不是更新面板。如果我关闭计时器聊天消息将不会更新？ – Mal

我没有说停止你的服务器端计时器。我说要删除_SetChatTextScrollPosition javascript函数。它所做的就是每隔1毫秒将div的位置设置到底部。它与更新聊天消息无关。这是你的滚动不起作用的原因。 – patmortech

通过删除我的滚动条在计时器更新时重置为TOP。 :( – Mal

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

希望这有助于你。

谢谢，并问候

苛刻Baid。

来源

2011-10-01 12:20:27

没有苛刻的Baid这不适合我。:( – Mal

你有没有找到你自己的解决方案？ –

无法拖动我的滚动条

回答

相关问题