JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollarea">
    <button id="button" onclick="prependStuff()">Click to Prepend</button>
    <!-- Content inserted here -->
</div>

CSS

#scrollarea { width: 200px; height: 200px; border: 2px solid #AAAAAA; padding: 5px; overflow-x: hidden; overflow-y: auto; }
#button { width: 100%; }

JavaScript

var scrollarea = document.getElementById('scrollarea');
var button     = document.getElementById('button');
var prependStuff = function(){
    var lastScrollHeight = scrollarea.scrollHeight;
    for(var n=0; n<12; n++){
        var newNode = document.createElement('div');
        newNode.innerHTML = 'Content: '+Math.random().toFixed(2);
        scrollarea.insertBefore(newNode, button.nextSibling);

    }
    scrollarea.scrollTop += (scrollarea.scrollHeight-lastScrollHeight);
}
prependStuff();