要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息。

聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条。

ps:复制代码请注意复制出来的的符号是否大小写咯,

<script type=”text/javascript”>
function add()
{
var now = “获取到用户输入的信息”;
var div = document.getElementById(‘scrolldIV’);
div.innerHTML = div.innerHTML + ‘<div class=”liao_main_right cb”><div class=”liao_main_center”><i></i>’ + now+ ‘</div></div>’;
div.scrollTop = div.scrollHeight;
alert(div.scrollHeight)
}
</script>
<span class=”notice”>请点击“插入一行”按钮,插入最新信息,当出现滚动条时,滚动条将自动保持在底部。</span><br />
<div id=”scrolldIV” style=”overflow:auto; height: 100px; width: 400px; border: 1px solid #999;”>

</div>
<input type=”button” value=”插入一行” onclick=”add();”>