JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrap'>
    <div class='info'>
        <div class='window'>
            <div id='window_height'>0</div>&nbsp;Window</div>
        <br />
        <div class='body'>
            <div id='body_height'>0</div>&nbsp;Body</div>
        <br />
        <div class='html'>
            <div id='html_height'>0</div>&nbsp;Window</div>
        <br />
    </div>
</div>

CSS

html {
    height: 200%;
    padding: 100px;
}
.info {
    position: absolute;
}
.info div {
    display: inline
}

JavaScript

$(window).scroll(function () {
    document.getElementById("window_height").textContent = $(window).scrollTop();
    document.getElementById("body_height").textContent = $('body').scrollTop();
    document.getElementById("html_height").textContent = $('html').scrollTop();
})