对不起我的英语不好
我尝试建立一个像 Facebook 聊天这样的聊天。
代码 1:
div_new = div_new+"<div id='refresh_chat_"+mem_id+"' style='width:100%; height:275px; bottom:25px; overflow-y:auto;'> load chat </div>";
代码 2:
$("#refresh_chat_"+mem_id).scrollTop(275);
ajax 将信息从 MySQL 发送到“代码 1”中的 div。
这个 div 带有滚动条。
我希望滚动条自动位于底部(代码 2 应该这样做)。
为什么这对我不起作用?(div的滚动条不在底部)
当我尝试在 ajax 没有向他发送信息的不同 DIV 中制作底部的滚动条时,一切正常。
当然,我在页面中调用了 jQuery。
完整代码:
<script type="text/javascript">
var bottom = "";
var div = new Array(4);
var count = 0;
var chats_on = "";
var div_new = "";
function chat(mem_id, nic) {
if (count > 3) { return false; }
div[count] = mem_id;
for (var i=0; i<count; i++){
if (div[i] == mem_id) {
return false;
}
}
var name = "send_chat_"+mem_id;
var url = "send_chat.php";
var left = 10+10*count+200*count;
chats_on = chats_on+mem_id;
div_new = "<div style='position:absolute; width:200px; bottom:0px; left:"+left+"px;'>";
div_new = div_new+"<div style='width:100%; background-color:#202020; border:1px solid black; border-bottom:0px; cursor:hand;' onclick=javascript:hideshow(document.getElementById('box_"+name+"')); dir=rtl><font color=white>"+ nic +"</font></div>";
div_new = div_new+"<div id='box_"+name+"' style='width:100%; height:300px; display:block; background-color:#ffffff; border:1px solid #202020; border-bottom:0px;'>";
div_new = div_new+"<div id='refresh_chat_"+mem_id+"' style='width:100%; height:275px; bottom:25px; overflow-y:auto;'> load chat </div>";
div_new = div_new+"<form name='"+name+"' onsubmit=\" return refresh('"+name+"', '"+url+"', document.forms['"+name+"']['"+name+"'].value, '"+mem_id+"', '', '', 'refresh'); \" method='post' style='display:inline;'>";
div_new = div_new+"<input name='"+name+"' autofocus=autofocus style='width:100%; height:25px; position:absolute; bottom:0px;' dir=rtl><input type=submit value=' send ' hidden=hidden>";
div_new = div_new+"</form>";
div_new = div_new+"</div>";
div_new = div_new+"</div>";
bottom = div_new;
document.getElementById('bottom_'+count).innerHTML = bottom;
count++;
$("#refresh_chat_"+mem_id).scrollTop(275);
setInterval("refresh('refresh_chat_"+mem_id+"', 'refresh_chat.php', '"+mem_id+"', '', '', '', 'refresh')", "1000");
}
<!-- chatbox show/hide -->
function hideshow(which){
if (!document.getElementById) { return; }
if (which.style.display=="block") { which.style.display="none"; }
else { which.style.display="block"; }
}
<!-- end chatbox show/hide -->
</script>
ajax代码:
<script type="text/javascript">
function refresh(name, url, info, info_1, info_2, dDiv, type)
{
if (type == "send") {
document.getElementById("send_"+name).innerHTML = info;
Input(name);
if (info == "") {
document.getElementById(name).innerHTML="";
return;
}
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var xhr = new XMLHttpRequest();
var params = "c=<?php echo $_GET["c"]; ?>&info="+info+"&info_1="+info_1+"&info_2="+info_2;
xhr.open("POST",url,true);
xhr.onreadystatechange = function() {
if( this.readyState == 4 && this.status == 200) {
document.getElementById(name).innerHTML = this.responseText;
}
};
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-length", params.length);
xhr.setRequestHeader("Connection", "close");
xhr.send(params);
return false;
}
</script>