javascript - 我怎样才能在这里制作一个 html 解决方案而不是使用 javascript hack？

Question

我正在尝试为我的网站元素创建一个聊天框(前端)。

您可以在这里测试:https://jsfiddle.net/ovdzaj2v/5/

现在，当前的 fiddle 使用 javascript hack pushChatUp() 函数来移动消息。我不喜欢这个黑客，因为:

• 太丑了。
• 很难计算消息必须发送多少，因为它们可以大小不同(重叠问题)。

我想要一个 HTML 解决方案，但不知道该怎么做。例如，html 元素彼此堆叠在一起，如下所示:

<div id=top>
</div>
<div id=bottom>
</div>

如何使用 .messages 实现这一点？因此，在 javascript 附加消息后，将不再需要 pushChatUp()。

JS:

function openChat(){
    document.getElementById("chatinput").style.display = "block";
    document.getElementById("chatbutton").style.display = "block";
    c = document.getElementById("chatbutton");
    i = document.getElementById("chatinput");
    cm = document.getElementById("chatmessage");
    c.innerHTML = "";
    c.style.height = "100%";
    c.style.background = "slategray";
    c.style.width = "350px";
    c.style.marginLeft = "20%";

    i.style.display = "block";
    c.style.display = "block";
}

function checkKey(e) {
    var event = window.event ? window.event : e;
    if(event.keyCode === 13){ //Enter
        i = document.getElementById("chatinput");
        sendChat(i.value);
        i.value = "";
    }
}

var clientChat = [];

function sendChat(text){
    var div = document.createElement('div');

    div.className = "chatmessage";

    div.innerHTML = text;

    div.style.display = "block";

    pushChatUp();

    clientChat[50] = div;

    document.getElementById('chat').appendChild(div);
}

function pushChatUp(){
    var correctOrder = [];
    var size = 0;
    for(var key in clientChat) {
        message = clientChat[key];
        key = Number(key) + 70;
        message.style.marginBottom = key.toString() + "px";
        correctOrder[key] = message;
        ++size;
        if(size > 28){
            correctOrder.splice(key, 1);
            message.style.display = "none";
            document.getElementById('chat').removeChild(message);
        }
        lastMessageSize = message.innerHTML.length;
    }
    clientChat = correctOrder;
}

Answer 1

您无法为每条消息设置position:absolute，而您显然需要将它们相互定位。

话虽这么说，您的实际问题是在聊天窗口底部垂直对齐消息。我对此的最佳猜测是使用动态增长的容器，绝对位于底部。

我在下面创建了一个缩小的示例(没有任何聊天功能，但您明白了)。不过，您仍然需要使用 JS 向下滚动 (scrollTop())。

#chat {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background: #339;
  height: 150px;
}

#container {
  position: absolute;
  bottom: 50px;
  max-height: 100px;
  overflow-y: auto;
  width: 100%;
}

.message {
  background: grey;
  margin: 4px;
  width: fit-content;
}

input {
  position: absolute;
  margin: 12px;
  bottom: 0;
}

<div id="chat">
  <div id="container">
    <div class="message">Hello</div>
    <div class="message">Hi there</div>
    <div class="message">How are you? What are you doing?</div>
    <div class="message">Surfin' the web</div>
    <div class="message">Haha, me toooo :o)</div>
  </div>
  <input placeholder="I'm useless" />
</div>