Question

我正在使用asp.net开发一个聊天应用程序，在该应用程序中使用div标签在div标签中添加asp.net Literal消息框和一个计时器控件，现在我的问题是当页面刷新或点击按钮时（任何时候）div滚动条总是顶部但我希望它保持在底部，如何调整我的代码？

<div id="divMessages" style="background-color: White; border-color:Black;border-width:1px;border-style:solid;height:300px;width:592px;overflow-y:scroll; font-size: 11px; padding: 4px 4px 4px 4px;" onresize="SetScrollPosition()">
  <asp:Literal Id="litMessages" runat="server" />
</div>
<asp:TextBox Id="txtMessage" onkeyup="ReplaceChars()" onfocus="SetToEnd(this)" runat="server" MaxLength="100" Width="500px" ClientIDMode="Static" />
<asp:Button Id="btnSend" runat="server" Text="Send" OnClientClick="SetScrollPosition()" OnClick="BtnSend_Click" ClientIDMode="Static"/>

和javascript函数是

function SetScrollPosition()
{
  var div = document.getElementById('divMessages');            
  div.scrollIntoView(false);
  //(or) 
  div.scrollTop = 10000;
  //(both are checking)
}

请给我任何关于那个的建议

我检查this example它正在使用更新面板，但我也有更新面板和计时器控件，我需要使用这些控件来维护底部的div滚动条请给我任何建议。 ...............

Answer 1

检查此代码See this Example

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"
            ScriptMode="Release" />
        <script type="text/javascript">
            var xPos, yPos;
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            function BeginRequestHandler(sender, args) {
                if ($get('<%=divMessages.ClientID%>') != null) {
                    xPos = $get('<%=divMessages.ClientID%>').scrollLeft;
                    yPos = $get('<%=divMessages.ClientID%>').scrollTop;
                }
            }
            function EndRequestHandler(sender, args) {
                if ($get('<%=divMessages.ClientID%>') != null) {
                    xPos = $get('<%=divMessages.ClientID%>').scrollLeft = xPos;
                    yPos = $get('<%=divMessages.ClientID%>').scrollTop = yPos;
                }
            }
            prm.add_beginRequest(BeginRequestHandler);
            prm.add_endRequest(EndRequestHandler);
        </script>

Answer 2

我可能有一个简单的解决方案，但我不确定你是否想要。

在传统中，我们可以为网址设置锚点，并在访问此页面时让页面滚动到特殊位置。与此类似：http://www.example.com/#message。

所以，你可以写一些js来控制这个锚。

<div id="divMessages" onresize="SetScrollPosition()">
    <asp:Literal Id="litMessages" runat="server" />
</div>
<div id="msg-local" />//add new element is to auto scroll to here.

function SetScrollPosition()
{
     ......
     //set the url with anchor
     window.location.hash = "go-msg-local"; 
     //set this value can disable browser auto scroll
 }

//然后页面加载事件

 function page_load {
    if (window.location.hash) {
      window.location.hash = "msg-local"; 
    }
 }

当页面刷新时，如何使用asp.net计时器控件将div设置为div标签中的垂直滚动条

2 个答案: