JSFiddle - React, Tailwind, and code Playground

by Patrick Hund

HTML

<div id="scrollbox">
    <p>START sd fsf sdfsdfsdfsdfsd fs</p>
    <p>sdfsfoisjdfo ijdsosijf osdijfsofdisjdf</p>
    <p>sd fsf sdfsdfsdfsdfsd fs</p>
    <p>sdfsfoisjdfo ijdsosijf osdijfsofdisjdf</p>
    <p>sd fsf sdfsdfsdfsdfsd fs</p>
    <p>sdfsfoisjdfo ijdsosijf osdijfsofdisjdf</p>
    <input>
    <p>sd fsf sdfsdfsdfsdfsd fs</p>
    <p>sdfsfoisjdfo ijdsosijf osdijfsofdisjdf</p>
    <p>sd fsf sdfsdfsdfsdfsd fs</p>
    <p>sdfsfoisjdfo ijdsosijf osdijfsofdisjdf</p>
    <p>sd fsf sdfsdfsdfsdfsd fs</p>
    <p>sdfsfoisjdfo ijdsosijf osdijfsofdisjdf END</p>
</div>
<div id="monitor">
</div>
<button type="button" id="scroll-me">scroll up</button>

CSS

#scrollbox {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 200px;
    width: 400px;
    overflow: scroll;
    background-color: lime;
}
#monitor {
    position: absolute;
    top: 220px;
    left: 10px;
}
#scroll-me {
    position: absolute;
    right: 50px;
    top: 10px;
}

JavaScript

var $scrollbox = $("#scrollbox"),
    $input = $("input");

function log(msg) {
    $("#monitor").html(msg);
}

function calc() {
    return $scrollbox.scrollTop() + $input.offset().top - $scrollbox.offset().top;
}

window.setInterval(function () {
    log("box offset: " + $scrollbox.offset().top + "<br>" +
        "input offset: " + $input.offset().top + "<br>" +
        "box scrolltop: " + $scrollbox.scrollTop() + "<br>" +
        "calc: " + calc());
}, 200);

$("#scroll-me").click(function () {
    $scrollbox.scrollTop(calc());
});