JSFiddle - React, Tailwind, and code Playground

HTML

Search (ctrl+f) for words: car, cat, mouse, dog, lorem ipsum, orange, computer, eyes, keyboard, monkey.

<div id="hiddenScrollableContent">
    <div></div> <!-- first element must be empty -->
    <div>car</div>
    <div>cat</div>
    <div>mouse</div>
    <div>dog</div>
    <div>lorem ipsum</div>
    <div>orange</div>
    <div>eyes</div>
    <div>computer</div>
    <div>keyboard</div>
    <div>monkey</div>
</div>
<br/>
<br/>
<br/>
you're searching for: <span></span>?

<br/>
<br/>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus ullam perferendis dolorem asperiores quaerat eligendi est soluta maiores dicta fuga dolorum blanditiis dolores vitae et accusantium. Nobis sed repellat deleniti.<p>

CSS

#hiddenScrollableContent{
    overflow: scroll;
    position:absolute;
    height:20px;  /* can't be zero ! */
    opacity:0.01; /* can't be zero ! */
    pointer-events: none;
}

#hiddenScrollableContent div{
    height: 100px;
}


span{
    color: red;
    font-weight: bold;
    font-size: 3em;
}

JavaScript

$('#hiddenScrollableContent').scroll(function(e){
    var top = $(this).scrollTop();
    
    if (top==0)
        return; //prevents endless loop
    
    var index = Math.round(top / 100);
    var element = $('div', this).eq(index);
    var elementsText = element.text();
    $(this).scrollTop(0);
    
    console.log('top:'+top, 'index:'+index);
    
    $('span').text(elementsText);
});