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
How to set the down to the vertical scroll bar in div tag using asp.net timer control when page is refreshing
提问by hmk
I am developing a chat application using asp.net, in that application using div
tag with in div
tag add the asp.net Literal
message box and one timer control , now my problem is when the page will refresh or click the button (any time) the div
scrollbar 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";
}
}