JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="content"></div>
    <div class="bar">BAR</div>
</div>

CSS

.parent {
    width: 60%;
    height: 300px;
    position: absolute;
    background-color: tomato;
    overflow: auto;
}
.content {
    height: 18000px;
    width: 300px;
    background-color: firebrick;
}
.bar {
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 20px;
    text-align: center;
    width: 50px;
    height: 20px;
    background-color: beige;
}

JavaScript

var stickToBottom = function (parent) {
    var bar = parent.querySelector('.bar');
    var top = bar.offsetTop;
    parent.addEventListener('scroll', function (e) {
        var el = e.currentTarget;
        bar.style.bottom = -el.scrollTop + "px";
        bar.style.left = el.scrollLeft + "px";
    });
}
var parent = document.querySelector('.parent');
stickToBottom(parent);