javascript - 防止div碰撞

Question

我有一个用户可以聊天的游戏。每个语音都作为位置 absolute 元素附加到正文，并使用 user xposition 作为“左”CSS 标记。他们也很活跃地到达顶部。我不希望它们发生碰撞，无论是垂直还是水平。

这是一个例子:

它们不必是一个接一个，但它们需要“一个接一个”

我尝试了jquery every()，然后从当前语音位置删除 60 像素。这是我的代码:

var Speech = {
    History: [],
    New: function(user, text, int) {
        var pos = getUserPosition(user).x + 18;
        var speech = HTML.Speech.split('\n');
        var maxInt = speech.length - 1;
        if (int <= maxInt) {
            var html   = speech[int];
            var random = Rand(10);

            Speech.pushThemUp();

            /** append here ect...
            set left position...
            $('#speech' + random).css("left", nLeft + "px"); **/
        }
    },
    pushThemUp: function() {
        $('.speech').each(function(i, obj) {
            var newTop = parseInt($(this).css('top')) - 60;
            $(this).css('top', newTop+'px');
        });
    },
    Listener: function() {
        var int = setInterval(function() {
            $('.speech').each(function(i, obj) {
                if(parseInt($(this).css('top')) < 0) {
                    $(this).remove();
                } else {
                    var newTop = parseInt($(this).css('top')) - 10;
                    $(this).animate({'top': newTop+'px'});
                }
            });
         }, 1000);
    },
    getHistory: function() {
        return Speech.History;
    }
};
Speech.Listener();
module.exports = Speech;

但是这不起作用。他们仍然可以像上面的例子一样发生碰撞。

我该如何解决这个问题？

请注意:在该示例中，未调用 Speech.Listener()。

编辑:最后，我认为我当前的解决方案是循环 .speech 类然后添加顶部 px 很好，但为什么它是动画的？看一下gif，pushThemUp函数不需要动画气泡而是直接编辑位置，我该如何解决这个问题？

Answer 1

我创建了一个代码片段，其中消息出现并向上移动。当没有剩余空间时，会出现滚动条。

var box = document.getElementById("box");
var topp = 3;

function post(str) {
  var obj = document.createElement("div");
  obj.className = "chatObj";
  obj.innerHTML = str;
  box.appendChild(obj);
  box.appendChild(document.createElement("br"));

  var width = obj.clientWidth;
  var height = obj.clientHeight;
  obj.style.marginLeft = (box.clientWidth / 2 - width / 2) + "px";

  var x = 15;
  obj.style.top = (box.clientHeight - x - height) + "px";

  var interval, ctop;
  interval = setInterval(function() {
    x += 4;
    console.log(ctop, topp);
    ctop = box.clientHeight - x - height;
    obj.style.top = ctop + "px";
    if (ctop <= topp) {
      obj.style.top = topp + "px";
      topp += height + 6;
      clearInterval(interval);
    }
  }, 5);
}

setTimeout(function() {
  post("Hi!");
}, 500);

setTimeout(function() {
  post("Trollolo!");
}, 1500);

setTimeout(function() {
  post("Lorem ipsum dolor sit amet, timeam aliquando ei cum, putent possim in usu, at causae pericula petentium has. In mea legere salutatus voluptaria. No vix ancillae accusata. Nec meis probo noster eu, ius no quas audire.<br><br>Qui quem nominavi ei. Pri nisl eirmod id. Has cetero vocent abhorreant no, at mei altera expetendis. Has id novum aeterno salutatus.<br><br>Prompta offendit et eos, eos an admodum comprehensam, ex velit doming dolorem mei. At has dolor alterum laoreet, id duo tollit libris contentiones. An mel recteque omittantur dissentiet, ex nam novum iuvaret. Per id alterum habemus gubergren.<br><br>Nulla possim mea in. Vis et postulant constituam. Viris vulputate vituperatoribus eu usu, wisi meis ex his. Prompta accumsan cum et, possim eligendi omittantur sed id. Eos ad nemore integre recusabo, agam doctus viderer ei pri, cu eius nonumes senserit vis. Qui iudico causae te.<br><br>Eam ne mandamus evertitur, case adversarium neglegentur duo ex, no cum nominati forensibus. Et vel putant deleniti. Illum aliquando voluptatibus per no, ei quo albucius phaedrum. Cu lorem appetere percipit sed, ubique epicuri ad eos, te eos diam nusquam persecuti. Eu qui meis illum eleifend, eam veniam vivendo no, nisl fierent in quo.");
}, 2500);

#box {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: tomato;
  overflow: auto;
}
#box .chatObj {
  position: absolute;
  display: inline-block;
  max-width: 80%;
  background-color: white;
  border-radius: 2px;
  padding: 3px 6px;
  margin: 3px 0;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
  font-size: 14px;
}
#box .chatObj::after {
  display: block;
  position: absolute;
  content: ".";
  color: transparent;
  height: 6px;
}

<div id="box"></div>