To create an online chatProgramIn the final modification, You Need To scroll the obtained information in real time to ensure that the user can always see the latest message.
The chat program is designed based on Ajax and does not use a framework. The message container is a DIV, so the question is how to control the scroll bar of the div.
You can set the scrolltop attribute to control the position of a scroll bar. For details, see:
Http://hi.baidu.com/chen1345789/blog/item/de727bfb45587b176d22eba1.html
But the sameCodeI found out that the value of scrolltopic under the XHTML standard is always 0. The solution is to use document.doc umentelement. scrolltop to replace document. Body. scrolltop. What I have solved for half a day is the scroll bar of the entire page. I cannot use this method. Because it is not a framework structure, it is impossible to use the body's scroll bar to control browsing information.
There is very little information on this issue on the Internet, and csdn also says there is no way.
I don't have to worry about it. Later I checked the DHTML manual and learned that DIV has a doscroll method that can be used to simulate scroll bar clicking. But it is disappointing that it is completely invalid when it comes to me. Isn't it not supported by XHTML?
Finally, I found three ways to control Div content scrolling:
Method 1:
Use the anchor tag to scroll to the position, and then use the click method to simulate clicking to scroll to the anchor location.
<Script language = "javascript1.2" type = "text/JavaScript">
Function ongetmessage (context)
{
MSG. innerhtml + = context;
Msg_end.click ();
}
</SCRIPT>
<Div style = "width: 500px; overflow: Auto">
<Div id = "MSG" style = "overflow: hidden; width: 480px;"> </div>
<Div> <a id = "msg_end" name = "1" href = "#1"> & nbsp </a> </div>
</Div>
Method 2:
Use the scrollintoview method of Div to scroll the bottom to the visible position [list = 1] <script
Language = "javascript1.2"
Type = "text/JavaScript">
Function ongetmessage (context)
{
MSG. innerhtml + = context;
Msg_end.scrollintoview ();
}
</SCRIPT>
<Div style = "width: 500px; overflow: Auto">
<Div id = "MSG" style = "overflow: hidden; width: 480px;"> </div>
<Div id = "msg_end" style = "height: 0px; overflow: hidden"> </div>
</Div>
Method 3:
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "keywords" content = "scroll bar, scrollbar, bottom of the page, chat window,"/>
<Meta name = "Description" content = "sometimes (such as developing chat programs), we need to keep the scroll bar at the bottom, such as the chat window, the latest sent and received information should be displayed at the bottom. To view the content at the bottom, you must ensure that the scroll bar is kept at the bottom. "/>
<Title> how to keep the scroll bar at the bottom-scroll bar, scrollbar, bottom of the page, chat window, </title>
</Head>
<Body>
<Div id = "example">
<H3 id = "example_title"> Method for keeping the scrollbar at the bottom <Div id = "example_main">
<! -- ************************************ Instance code start ************************************ -->
<SCRIPT type = "text/JavaScript">
Function add ()
{
VaR now = new date ();
VaR DIV = Document. getelementbyid ('rolldiv ');
Div. innerhtml = div. innerhtml + 'time _ '+ now. gettime () +' <br/> ';
Div. scrolltop = div. scrollheight;
}
</SCRIPT>
<SPAN class = "notice"> click "insert row" to insert the latest information. When a scroll bar appears, the scroll bar is automatically kept at the bottom. </Span> <br/>
<Div id = "scrolldiv" style = "overflow: auto; Height: 100px; width: 400px; Border: 1px solid #999;">
</Div>
<Input type = "button" value = "insert a row" onclick = "add ();">
<! -- ************************************ Instance code end with ************************************ -->
</Div>
</Div>
</Body>
</Html>
Method 4:
This is more complex and flexible. It is to use Div + JS + image to construct a scroll bar. Of course, how can the picture look good.
The main part is to add the overflow: hidden attribute to the outer Div, and adjust the margin-left and margin-top of the inner Div through JS Code to control the scrolling of the content, because the above two methods can meet the requirements, this method is not detailed, you can try it if you are interested.
Share: QQ space Sina Weibo Renren kaixin.com more
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
