Question

我在Electron制作了一个消息应用程序。当我们滚动浏览标题栏时，我使用了背景滤镜来模糊消息，因此我需要将消息传递到标题栏后面，而不是在屏幕中间包含在他们自己的div中。

当页面未滚动时，消息的行为与预期一致。但是，在页面底部，消息将被底栏切断以输入消息。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Chat</title>
    <link rel="stylesheet" href="css/chat.css" />
    <script src="js/chatWindow.js"></script>
</head>
<body>
    <div class="header">
        <span class="name">Room Name</span>
    </div>
    <div class="messageBar">
        <input id="messageBox" type="text" placeholder="Enter a message..." />
        <div class="sendBtn">Send</div>
    </div>
    <div class="messageList"></div>
</body>
</html>

CSS

@font-face {
    font-family: "Roboto Light";
    font-style: "normal";
    font-weight: 400;
    src: url("fonts/Roboto-Light.ttf") format("truetype");
}
body {
    background-color: white;
    font-family: "Roboto Light";
    padding: 45px 0px;
}

.header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 45px;
    z-index: 100;
    background-color: rgba(56, 92, 254, 0.75);

    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    -webkit-app-region: drag;
}
.header span {
    font-weight: bold;
}

.messageBar {
    position: fixed;
    top: calc(100% - 45px);
    left: 0px;
    width: 100%;
    height: 45px;
    z-index: 100;
    background-color: rgba(57, 93, 255, 0.75);

    padding: 0px;

    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    vertical-align: middle;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

#messageBox {
    width: 90%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);

    font-size: 1em;

    margin: none;
    border: none;
    padding: 0px 5px 0px 5px;
}
#messageBox::-webkit-input-placeholder {
    color: dimgray;
}

.sendBtn {
    float: right;
    width: 10%;
    height: 100%;
    padding: 0px 3px;
    line-height: 45px;

    transition: 0.2s;
}
.sendBtn:hover {
    background-color: rgba(0,0,0,0.25);
}

.messageList {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.message {
    display: block;
    width: auto;
    max-width: 50%;
    border-radius: 10px;
    padding: 4px;
    margin: 5px 0px;
    box-sizing: border-box;

    background-color: lightblue;
    overflow-wrap: break-word;
    float: left;
    clear: both;
}
.message.mine {
    float: right;
    background-color: lightgreen;
}

有人知道如何解决这个问题吗？这里有一个CodePen的例子来说明发生了什么。任何帮助将不胜感激！

Answer 1

试试这个javascript代码可能对您有帮助。

    window.addEventListener("load", function(){

    var messageList = document.querySelector(".messageList");
    var messageBox = document.getElementById("messageBox")
    var sendBtn = document.querySelector(".sendBtn");

    for(var i = 0; i < 100; i++) {
        var content = "Message body: " + i + "\nThe quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.";
        createMessageBubble(content, Math.random() > 0.5);
    }

    sendBtn.onclick = function() {
        var message = messageBox.value;
        messageBox.value = "";
        if(!message || message.length <= 0) {
            return;
        }
        createMessageBubble(message, true);
        // TODO: actually send the message
    };

    function createMessageBubble(content, isUser) {
        var el = document.createElement("div");
        el.classList.add("message");
        if(isUser) {
            el.classList.add("mine");
        }
        el.innerText = content;
        messageList.appendChild(el);
    }
    var div = document.createElement("div");
    div.style.width = "100%";
    div.style.height = "45px";
    div.style.float = "left";
    messageList.parentNode.appendChild(div);
});

滚动区域外的元素

1 个答案: