JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one" style="overflow-x: hidden; height: 100px; border: 1px red solid;">
    <div id="two" style=" height: 200px; border: 1px green solid;padding-top: 85px;">
        <input style="position: relative;" />
    </div>
</div>

JavaScript

var oldScrollTop = 0;

function saveScrollTop() {
    oldScrollTop = $("#one").scrollTop();
    $("#one").on("scroll", oneScrolling);
}

function restoreScrollTop() {
    $("#one").off("scroll", oneScrolling);
}

function oneScrolling(e) {
    //alert('Scrolling');
    $("#one").scrollTop(oldScrollTop);
};

$("input").on("keydown", function(e) {});

$("input").on("focusin", saveScrollTop);
$("input").on("focusout", restoreScrollTop);