JSFiddle - React, Tailwind, and code Playground

by acbabis

HTML

<input/>
<div style="width: 50px; height: 50px; overflow: hidden; position: relative; background-color: #9999FF">
    <div style="width: 50px; position: absolute; top: 0" id="scroller">asdf asd fas df sadf asdf asd fas df asf sadf asd fasd fasd asdf asd fas df sadf adsf asd fas dfas df asdf asdf asd fsa dfads fas df<input /></div>
</div>

JavaScript

(function (elem) {
    var timer;
    elem.hover(function () {
        var elem = $(this);
        timer = setInterval(function () {
            elem.css('top', elem.position().top - 1);
        }, 50);
    }, function () {
        clearInterval(timer)
    });
    elem.on('focus', '*', function() {
        console.log(1, elem.position().top);
        setTimeout(function() {
            console.log(2, elem.position().top);
        }, 0);
    });
})($('#scroller'));