Question

实际页面参考：www.friendsinclass.co.nf

我正在建立一个简单的聊天，我有一个问题。加载页面时，聊天滚动条会自动向下滚动，您可以在底部的updatescroll（）函数中看到。目前，还在$（document）.ready中的setInterval中每秒调用updatescroll，以便在写入新消息时向下滚动。如您所见，在submitChat（）中还调用了autoscroll（），这意味着每次我提交消息时都会调用autoscroll。问题是，如果一个用户提供另外一条消息，则不会调用自动滚动，因此我每隔1秒设置一次自动滚动来解决此问题。

问题：如果用户想要向上滚动以查看旧消息，则自动滚动将每1秒再次向下滚动，使他的搜索无用。如何以简单的方式解决这个问题？我尝试了很多方法，但它不会工作，我对Jquery也不是很好，所以请尽可能简单。

非常感谢你！ JS下面

function submitChat() {
    form1.uname.readOnly = true;
    form1.uname.style.border = 'none';
    var uname = form1.uname.value;
    var msg = form1.msg.value;
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4&&xmlhttp.status==200) {
            document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
    setTimeout(function(){ updateScroll(); }, 100);
            }

    }
    xmlhttp.open('GET','insert.php?uname='+uname+'&msg='+msg,true);
    xmlhttp.send();
    setTimeout(function(){ updateScroll(); }, 100);
}



    $(document).ready(
            function(e) {
            $.ajaxSetup({cache:false});
 setInterval(function({$('#chatlogs').load('logs.php');updateScroll();}, 1000);
            setTimeout(function(){ updateScroll(); }, 1200);

    });

</script>

   <script language="javascript">
    function toggleState(item){
       if(item.className == "on") {
          item.className="off";
       } 
       else {
          item.className="on";
       }
    }
 </script>

<script>

function updateScroll() {               

    var element = document.getElementById("chatlogs");
    var elementHeight = element.scrollHeight;
    element.scrollTop = elementHeight;
}
window.onload = updateScroll;
</script>

PS One解决方案可能是使用我创建的切换开关，一个简单的按钮，变成红色和蓝色。例如，单击时可以每秒调用updateScroll（），再次单击时再将其关闭。但我不知道如何将其不断变化的课程与职能联系起来。

切换开关的CSS：

.on  { background:blue; }
  .off { background:red; }

HTML切换：

    <input type="button" id="btn" value="button" 
    class="off" onclick="toggleState(this)" />

新邮件到达时如何在聊天滚动条中滚动（不是由您发送）

0 个答案: