防止div碰撞

Question

我有一个用户可以聊天的游戏。每个语音都作为位置private IEnumerable<BugReportStatus> Checkfilter(BugReportFilter filter) { switch (filter) { case BugReportFilter.Open: return new List<BugReportStatus>() { BugReportStatus.OpenAssigned, BugReportStatus.OpenUnassigned }; case BugReportFilter.Closed: return new List<BugReportStatus>() { BugReportStatus.ClosedAsResolved, BugReportStatus.ClosedAsRejected }; default: return null; } } 元素附加到正文，absolute作为“左”CSS标记。它们也是动画的顶部。我不希望它们发生碰撞，垂直或水平碰撞。

这是一个例子：

它们不一定是彼此，但它们必须是user x position

我尝试过"one after one"，然后从当前语音位置移除60像素。这是我的代码：

jquery each()

但它不起作用。他们仍然可能像例子一样发生碰撞。

我该如何解决？

请注意：在该示例中，未调用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类然后添加顶级px是好的，但为什么它是动画的？看看gif，pushThemUp函数不必动画气泡但直接编辑位置，我该如何解决呢？

Answer 1

我创建了一个代码段，其中显示消息并向上移动。如果没有剩余空间，则会出现滚动条。

＆＃13;

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你使用position: relative和一个带有display: block的包装元素，你可以得到你想要的，而不必担心碰撞检测。您唯一需要做的就是根据玩家位置减去气泡的初始顶部位置来计算初始top值（因为使用position: relative气泡将被添加到DOM下面最后的泡沫）。

看到这个简单的jsfiddle。 https://jsfiddle.net/straker/0n6jbupg/