Elements Outside Of Scroll Area

I'm making a messaging app in Electron. I'm using backdrop-filter to blur the messages as they scroll past the title bar, so I need the messages to pass behind the title bar, rathe

Solution 1:

Try this javascript code may this help you.

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