JSFiddle - React, Tailwind, and code Playground

by ScottRippey

HTML

<div class="top">
TOP
</div>
<div class="scroll">
    <p>
    <div style="background: #faa">Scroll</div>
        <p>
    <div style="background: #afa" class="target">Target</div>
        </p>
    </p>
</div>
<div>A</div><div>B</div><div>C</div>

CSS

html, body, div {
    margin: 0; padding: 0;
}
div {
    height: 100px;
    width: 100px;
}
div.scroll {
    height: 50px;
    overflow-y:auto;
    overflow-x:hidden;
}

JavaScript

var scroll = $$(".scroll")[0];
scroll.addEvent("scroll", function(){
    
    var target = $$(".target")[0];
    var top = $$(".top")[0];
    
    var a = [];
    a.push(target.offsetTop - scroll.offsetTop - scroll.scrollTop);
    a.push(target.getScrolls());
    
    console.log.apply(console, a);
    
});

    scroll.fireEvent("scroll");