JSFiddle - React, Tailwind, and code Playground
HTML
<div class="nested">
<div><input type="text" /></div>
<div><input type="text" /></div>
<div class="nested">
<div><input type="text" /></div>
<div><input type="text" /></div>
<div class="nested">
<div><input type="text" /></div>
<div class="nested">
<div><input type="text" /></div>
<div><input type="text" /></div>
<div><input type="text" /></div>
<div><input type="text" /></div>
</div>
</div>
<div class="nested">
<div><input type="text" /></div>
<div><input type="text" /></div>
<div class="nested">
<div><input type="text" /></div>
<div><input type="text" /></div>
<div><input type="text" /></div>
<div><input type="text" /></div>
<div class="nested">
<div><input type="text" /></div>
<div><input type="text" /></div>
<div class="nested">
<div><input type="text" /></div>
<div class="nested">
<div><input type="text" /></div>
<div><input type="text" /></div>
<div><input type="text" /></div>
<div><input type="text" /></div>
</div>
</div>
<div class="nested">
<div><input type="text" /></div>
<div><input type="text" /></div>
<div class="nested">
<div><input type="text" /></div>
<div><input type="text" /></div>
<div><input type="text" /></div>
</div>
</div>
</div>
<div><input type="text" /></div>
...
CSS
.nested {
height: 50px;
overflow: hidden;
border: 1px dotted #ccc;
padding: 8px;
}
body { font-family: sans-serif; }
JavaScript
$('input').on('focus', function () {
$('#result').html($(this).parentsUntil("body").map(function(){return this.scrollTop;}).get().reverse().join("<br/>"));
});