Question

我编写了一个jquery代码来自动刷新聊天框中的消息。但是当我尝试通过在聊天框中向上滚动来阅读旧消息时，它不允许，因为聊天部门每1秒刷新一次并返回到新消息

 $(document).ready(function(){        
   setInterval(function(){ $('#messagesBody').load("get-messages.php? 
     employee_id="+employee_id);
     $("#messagesBody").scrollTop($("#messagesBody")[0].scrollHeight);
   }, 1000);
 });

我想阅读聊天框中的旧消息。

Answer 1

最终编辑：

我有一点时间并将这个片段放在一起。我在初步答案中出错的是，通过在messagesBody scrollTop和scrollHeight之间进行比较，你还必须减去messagesBody div的高度，所以比较是：

if ($('#messagesBody')[0].scrollTop < $("#messagesBody")[0].scrollHeight - $('#messagesBody').eq(0).height() - 50).

使用此代码段，如果您在messagesBox中向上滚动50 px，您将看到自动滚动被禁用。

$(document).ready(function(){    

   var autoScroll = true;
   
   $("#messagesBody").eq(0).scroll(function() {
       if ($('#messagesBody')[0].scrollTop < $("#messagesBody")[0].scrollHeight - $('#messagesBody').eq(0).height() - 50) autoScroll = false;
       else autoScroll = true;
       
       $("#autoScrollDiv").html((autoScroll ? "true" : "false"));
   });

   setInterval(function(){
   
   $('#messagesBody').append('<p>Some more text</p><p>Some other text because why not?</p>');
   
     if (autoScroll) {
          $("#messagesBody").scrollTop($("#messagesBody")[0].scrollHeight);
       }
     }, 1000);
 });

p {
background-color: white;
animation-name: fadeIn;
animation-duration: 2s;
animation-iteration-count:1;
}

@keyframes fadeIn {
from {background-color: #fff9d6;}
to {background-color: white;}
}

#messagesBody {
height:200px;
overflow:auto;
border:1px solid #111111;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messagesBody">
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
</div>
<div id="autoScrollDiv">true</div>

---老下面的答案---

这里有几种选择。我建议在messagesBody上收听滚动事件，并且只有在用户滚动到聊天div的底部（或接近底部）时才允许自动滚动。类似的东西：

（编辑：autoScroll被分配给错误的值）

//a boolean that decides whether auto scroll happens. With 50 px leeway
var autoScroll = true;
//listen for scroll event on messagesBody
$("#messagesBody).scroll(function() {
    if ( $("#messagesBody)[0].scrollTop >= $("#messagesBody")[0].scrollHeight - 50 ) autoScroll = true;
    else autoScroll = false;
});

//Elsewhere, in the code you've provided
if (autoScroll) $("#messagesBody").scrollTop($("#messagesBody")[0].scrollHeight);

这条线的想法：

if ( $("#messagesBody)[0].scrollTop >= $("#messagesBody")[0].scrollHeight - 50 )

检查div是否已从底部滚动超过50px。如果它仍然是从底部50px，那么autoScroll打开，如果没有，它将被关闭。

Answer 2

可以使用这样的逻辑，如果用户尝试滚动到顶部以阅读旧邮件，那么我们可以停用<html> <head> <title>Render test </title> <script type="text/javascript" src="libs/three.js"></script> <script type="text/javascript" src="libs/loaders/OBJLoader.js"></script> <script type="text/javascript" src="libs/loaders/MTLLoader.js"></script> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <div id="Stats-output"> </div> <div id="WebGL-output"> </div> <script type="text/javascript"> function init() { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); var webGLRenderer = new THREE.WebGLRenderer(); webGLRenderer.setClearColor(new THREE.Color(0xaaaaff)); webGLRenderer.setSize(window.innerWidth, window.innerHeight); webGLRenderer.shadowMap.enabled = true; camera.position.x = 0.3; camera.position.y = 20; camera.position.z = 60; camera.lookAt(new THREE.Vector3(0, 0, 0)); var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(0, 40, 30); spotLight.intensity = 2.5; scene.add(spotLight); document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement); var step = 0; var mesh; var mtlLoader = new THREE.MTLLoader(); mtlLoader.setPath("assets/models/"); mtlLoader.load('avatar.mtl', function(materials) { materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.setPath("assets/models/"); objLoader.load('avatar.obj', function(object) { object.scale.set(1, 1, 1); mesh = object; scene.add(mesh); object.rotation.x = 0; object.rotation.y = -1.3; }); }); render(); function render() { if (mesh) { mesh.rotation.y += 0.006; } requestAnimationFrame(render); webGLRenderer.render(scene, camera); } } window.onload = init; </script> </body> </html>操作，如果用户再次向下滚动，则重新启用scroll down：

action

$(document).ready(function() {
  var action = true // defaul value
  setInterval(function() {

    /*$('#messagesBody').load("get-messages.php? 
    employee_id="+employee_id);*/

    if (action === true) { // if scroll is down, do this
      $("#messagesBody").scrollTop($("#messagesBody")[0].scrollHeight);
    }

    console.log(action);
  }, 1000);


  $("#messagesBody").scroll(function() {
    var height = $(this).height();

    if ($(this).scrollTop() < height) { // if user scrolled to top
      action = false; // disable your action
    } else {
      action = true; // else, re enable your aciton
    }
  });

});

#messagesBody {
  width: 200px;
  height: 200px;
  background: gainsboro;
  overflow: auto;
}

p {
  height: 500px;
}

如何修复聊天框中的滚动问题

2 个答案: