如何在页面刷新时使用asp.net计时器控件在div标记中设置向下到垂直滚动条

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

请给我关于的任何建议

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

Answer 1

检查此代码查看此示例

<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

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

在传统情况下，我们可以为url设置一个锚点，并在访问该页面时让页面滚动到特定位置。类似于：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"; 
    }
 }