Append divs from bottom with scroll - Chat application example

Question

I'm looking to append divs from the bottom. At a certain point, the vertical scroll should kick in so you can view divs that were appended earlier on. I'm trying to replicate a typical chat application and how messages come from the bottom. Here's the codepen...

http://codepen.io/jareko999/pen/yaQmgk

Before I put the code, I'll explain a couple of workarounds I've tried thus far. The pen currently has the container absolutely positioned with a bottom of 0. The problem, which is a pain, is that once the height goes beyond the height of the viewport, it won't scroll. This is the problem with the absolute positioning workaround.

Another workaround I've tried is doing a height of 100vh and display of flex with justify-content flex-end so the columns start at the bottom. The problem with this is that the scroll will always start from the top. I believe the solution is a scroll function that I've created to scroll to the bottom every time a new div is added. Would this be the best method? The key here is that I want to be able to scroll up to the older divs but have the newer divs start from the bottom. Think of a typical chat application like slack or messages or similar.

HTML

<button onclick="myFunction()">Hey here's a box</button>

<div id="container">
</div>

CSS

body {
    margin: 0;
    width: 100%;
}

button {
    position: fixed;
    z-index: 10;
}

#container {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#box {
    width: 100%;
    background: tomato;
    opacity: 0;
    height: 100px;
    transition: .2s;
}

#box:last-child {
    opacity: 1;
    height: 0;
    animation: .2s height linear forwards;
}

@keyframes height {
    to {
        height: 100px;
    }
}

#box:nth-last-child(2) {
    opacity: .8;
}

#box:nth-last-child(3) {
    opacity: .6;
}

#box:nth-last-child(4) {
    opacity: .4;
}

#box:nth-last-child(5) {
    opacity: .2;
}

JS

function myFunction() {
    var box = document.createElement("div");
    box.setAttribute("id", "box");
    var container = document.getElementById('container');
    container.appendChild(box);

    // window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

}

Is there a better solution than the function I've created to scroll to the bottom? Much appreciated.

Jarek Ostrowski Jarek Ostrowski · Accepted Answer · 2016-10-21T13:37:27

Ok, so after messing around with some JS, I figured it out. I love when that happens...

Here's the codepen...

http://codepen.io/jareko999/pen/yaQmgk

I created a setInterval function for scrolling to the bottom.

var myVar = setInterval(function(){ 
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
}, .1);

However, since this interval runs every .1 seconds, I need to kill it in order to scroll around the divs above (like old chat messages), but I want the animation (of the new div coming in) to finish. So, I created a setTimeout function to kill the setInterval function at 200 ms.

setTimeout(function(){ 
    clearInterval(myVar);
}, 200);

Append divs from bottom with scroll - Chat application example

1 Answers