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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9925378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 08:14:49  来源:igfitidea点击:

How to set the down to the vertical scroll bar in div tag using asp.net timer control when page is refreshing

c#javascriptasp.nethtmlscrollbar

提问by hmk

I am developing a chat application using asp.net, in that application using divtag with in divtag add the asp.net Literalmessage box and one timer control , now my problem is when the page will refresh or click the button (any time) the divscrollbar is always top but I would like it to stay at the bottom, how to adjust my code?

我正在使用 asp.net 开发聊天应用程序,在该应用程序中使用div带有 indiv标记的标记添加 asp.netLiteral消息框和一个计时器控件,现在我的问题是页面何时刷新或单击按钮(任何时间)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"/>

and javascript function is

和 javascript 函数是

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

please give me any suggestion about that

请给我任何建议

I checked this exampleit is working with out update panel but i have update panel and timer control also, i need to using those controls to maintain the div scroll bar in bottom please give me any suggestion ................

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

回答by Ravi

Check this code 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>

回答by zhengchun

i may have a simple solution,but i not sure whether is you want.

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

in traditional,we can set an anchor for the url and let page scroll to special location when access this page.similar to this : http://www.example.com/#message.

在传统中,我们可以为 url 设置一个锚点,并在访问此页面时让页面滚动到特殊位置。类似于:http: //www.example.com/#message

so,you can write a little of js to control this anchor.

所以,你可以写一点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
 }

//then page load event

//然后页面加载事件

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