JSFiddle - React, Tailwind, and code Playground

by mrobin

HTML

<html><head></head>
<body>

<div id="text">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
    <p>Line 4</p>
    <p>Line 5</p>
    <p>Line 6</p>
    <p>Line 7</p>
    <p>Line 8</p>
    <p>Line 9</p>
    <p>Line 10</p>
    <p>Line 11</p>
    <p>Line 12</p>
    <p>Line 13</p>
    <p>Line 14</p>
</div>

    Lines Scrolled : <div id="result"></div>
</body>
</html>

CSS

#text{
width:200px;
height:200px;
background-color:red;
overflow:scroll;
}

JavaScript

$(function(){
    var meanLineHeight = $('#text > p').first().outerHeight();

    var result = $('#result');
    
    $('#text').scroll(function(){
        var linesScrolled = Math.ceil(this.scrollTop/ meanLineHeight);
        result.html(linesScrolled);
        
        var linesToSelect = $('#text > p').slice(linesScrolled);
        linesToSelect.css('background-color', 'yellow');
    });
});