JSFiddle - React, Tailwind, and code Playground

by Max Rafferty

HTML

<button id="button">trigger height change</button>
<div id="elem" style="background:red;height:10px;"></div>

JavaScript

var attachScrollModified = function () {
    document.addEventListener('DOMSubtreeModified', function () {
        this.removeEventListener('DOMSubtreeModified', arguments.callee, false);
        window.scroll(0, getBottomElemPos());
        attachScrollModified();
    });
}

var getBottomElemPos = function () {
    var scrollElem = document.getElementById("scrollElem");
    if (scrollElem) {
        document.body.removeChild(scrollElem);
    }
    scrollElem = document.createElement("div");
    scrollElem.id = "scrollElem";
    document.body.appendChild(scrollElem);
    return scrollElem.offsetTop;
}

//Code for demo, do not copy below
var height = 100;

var scroll = function () {
    height = height * 2;
    var elem = document.getElementById("elem");
    elem.style.height = height + "px";
    var elem2 = document.createElement("div");
    //elem2.appendChild(document.createTextNode("x"));
    document.body.appendChild(elem2);
}

document.getElementById("button").onclick = scroll;
attachScrollModified();