Question

抱歉我的英文

我尝试像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的滚动条不在底部）

当我尝试在不同的DIV中使滚动条位于底部时ajax没有向他发送信息时，一切正常。

当然，我在页面中调用了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>

应该位于底部的div的滚动条不起作用

0 个答案: