JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input type="text">
</div>
<div>
<input type="text">
</div>
<div>
<input type="text">
</div>
<div>
<input type="text">
</div>
<button>mudar foco</button>
CSS
button {
position: fixed;
top: 0px;
padding: 10px;
}
div {
padding: 200px;
height: 300px;
background: #eee;
}
JavaScript
var inputs = $('input').get();
var current = 0;
$('button').on('click', function () {
current++;
if (current == inputs.length) current = 0;
inputs[current].focus();
});
$(inputs).on('focus', function () {
// repara que o focus dispara antes de fazer scroll
// e por isso o .scrollTop() pode ser errado!
var scroll = $(document).scrollTop();
var input = this;
setTimeout(function () {
var scrollTardio = $(document).scrollTop();
input.value = scrollTardio;
console.log(scroll, scrollTardio);
}, 10);
});