聊天室如何让页面不闪烁 高分求救

我用ajax写了个简单的聊天室,前端得到数据后,用div.innerHtml+=content,
10秒钟刷一次.
可是这样页面会每隔10秒取一次数据.有的用户反映正在看内容,忽然就闪到最低部了.
我前端页面如何显示数据,才会没有这种情况.
也就是页面如何不闪烁

解决方案 »

  1.   

    http://www.codefans.net/jscss/code/1257.shtml
    这个是一个例子
      

  2.   

    1. 按时间顺序“倒序”显示，新的信息插入到消息窗口的上方
    2. 向底部插入新消息时，要把滚动条调整回来（cookie或其他方法保存滚动条的位置）
      

  3.   

    div.innerHtml+=content
    改成 div.appendChild(document.createTextNode(content));
    试试
      

  4.   

    蓝色冰点说的方法试过了.不行
    我看有说用隐藏iframe刷新.页面用document.write,但是具体不知道怎么用.
      

  5.   

    不太会用cookie保存滚动条位置,看了上面的那个cookie的方法.js水平一般般,不太明白
      

  6.   

    试运行一下，绝对是你想要的。FF、IE下测试通过
    <!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>
        <title></title>
        <style type="text/css">
        #output
        {
            border-style:solid;
            border-width:1px;
            width:350px;
            height:200px;
            overflow:auto;
        }
            #content
            {
                width: 297px;
            }
        </style>
        <script language="javascript" type="text/javascript">
            function Send() {
                var div = document.getElementById("output");
                var str = document.getElementById("content").value;
                var d = document.createElement("div");
                d.innerHTML = str;
                div.appendChild(d); //添加内容
                d.scrollIntoView(); //关键是这句
            }
        </script>
    </head>
    <body>
        <input id="content" type="text" /> <input type="button" value="发送" onclick="Send()" />
        <div id="output"></div>
    </body>
    </html>
      

  7.   

    d.scrollIntoView(); //关键是这句
    这句在ajax的页面里不好使,
    现在先不管闪烁的问题
    现在问题是滚动条每次离最低部总有一点点距离
    当用户发言后,滚动条不到最后面,有个几公分的差距
      

  8.   

    晕，ajax不就是javascript加个xmlHttpRequest对象而已吗实在不行，设置scrollTop属性来解决问题，能有多大设多大
      

  9.   

    可是这个d.scrollIntoView(); 确实在我的页面里不好用,我也上网搜过
    有人解决办法是设置2个div,每次定位到最后一个div,但是这个方法在我的页面里
    有bug,就是不能很准确的定位到最后
      

  10.   


    <div style="height:100%;width:100%;overflow:auto;border:2px inset white;BORDER-BOTTOM: 2px inset red;">
    <div id="chatDiv" style="padding:3px;width:100%;border:0px inset white;overflow:hidden; ">
    <table id="chatTb">
    </table>
    </div>
    <div id="chatEND" style="height:0px; overflow:hidden"></div>
      </div>function check(){
    var url = "/servlet/com.csc.ic.ICSystem?action_=getChatinfos_new&c_id="+c_id;
      new Ajax.Request(url, {onSuccess: function(transport) {    

    eval(transport.responseText);
     
      chatDiv.innerHTML=chatDiv.innerHTML+divContent;
      
      c_id=maxid;   
      } }); 
     chatEND.scrollIntoView(); 

    }
      

  11.   

    <html>
    <head>
        <title></title>
    </head>
    <body>
    <div style="height:300px; background-color:#f0f0f0; overflow:hidden;">
    <div style="height:100%;width:100%;overflow:auto;border:2px inset white;BORDER-BOTTOM: 2px inset red;">        
                    <div id="chatDiv" style="padding:3px;width:100%;border:0px inset white;overflow:hidden; ">
                        <table id="chatTb">
                        </table>                    
                </div>
            <div id="chatEND" style="height:0px; overflow:hidden"></div>
                 </div>
    </div><script language="javascript" type="text/javascript">
    function check(){    chatDiv.innerHTML = chatDiv.innerHTML + "测试文字 测试文字 ";
        chatEND.scrollIntoView();}
    window.onload = function() {
        setInterval(check, 100);
    }
    </script>
    </body>
    </html>
    我把你的代码改了一点点
    这段代码运行正常
    我用的是IE8，FF
      

  12.   

    要制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于AJAX设计的，没有用框架，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。网上有资料介绍说通过设置scrollTop属性来控制滚动条位置，具体可参见：
    http://hi.baidu.com/chen1345789/blog/item/de727bfb45587b176d22eba1.html但同样的代码拿到我这里却完全失效，又仔细查了下资料说XHTML标准下scrollTop的值恒为0，解决办法是使用document.documentElement.scrollTop代替document.body.scrollTop，讲了半天所解决的是整个页面的滚动条。这个方法我是用不了了，因为不是框架结构，所以不可能用body的滚动条控制浏览信息。网上关于这个问题的资料很少，连CSDN上也说没有办法。不死心，后来查DHTML手册得知DIV有个doScroll方法可以用来模拟滚动条点击，但很令人失望，到了我这里又是完全失效，难道又不被XHTML支持？
      

  13.   

    http://hi.baidu.com/laig8588/blog/item/645182d6ea7b172907088b82.html
    这时是div滚动条设置的文章
    请大家给我解决一下好吗
    当我页面加载的时候,用chatend.scrollIntoView();不好使.滚动条仍在最上面.
    当页面10秒刷新的时候就可以了.
    然后当我发言后,再次调用chatend.scrollIntoView();,滚动条不动.还在上一次显示的位置,没有随着我的发言内容到最低部.
      

  14.   

    如何获得xhtml标准下div的滚动条位置?
    我的页面document.body.scrollTop为0
    document.getElementById("chatDiv").scrollTop也为0
      

  15.   

    聊天窗口用DIV{overflow:scroll}。每条消息也用DIV appendTo上去，这样就行了
      

  16.   

    <div id='消息显示层'>
     <div class='每条消息'>消息1</div>
     <div class='每条消息'>消息2</div>
     <div class='每条消息'>消息3</div></div>
      

  17.   

    如果在执行scrollIntoView()的时候稍延迟一点,就可以了
      

  18.   

    是不是因为我返回的内容的问题啊.我返回的是2个div
    <div>姓名</div><div>内容</div>