JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div class='scrolltest'>
    <div id="bocal">
        bocal de cornichons
    </div>
</div>
</div>

CSS

#container {
    background-color: yellow;
    width: 100%;
    position:relative;
    height: 500px;
    overflow: scroll;
}
div.scrolltest {
    width: 500px;
    background-color: red;
    height: 10000px;
}

#bocal {
    position:absolute;
}

JavaScript

function main() {
    
    var onscroll = function() {
        var y = $("#container").scrollTop() + 30;
        var z = 0
        for (var c=0; c<y*10000; c++) {
            z+=c;
        }
        $("#bocal").text("bocal : "+z);
        $("#bocal").css("top", y);
        //document.getElementById("bocal").style.top=y+"px";
    };
    console.log($("#container"));
    $('#container').scroll(function() {
        window.setTimeout(onscroll, 0);
    });
    
}

$(main);