JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content" id="content">
    <p id="info">Содержимое документа</p>
</div>

CSS

div.content {
    background: #fa0;
    display: flex;
    height: 300%;
    position: absolute;
    width: 100%;
}
p {font-size: 2em; margin: auto;}

JavaScript

/* страница загружена */
window.onload = function() {
    info.innerHTML = 
        'BODY<br/>' + 
        'scrollHeight: ' + document.body.scrollHeight + '<br/>' +
        'offsetHeight: ' + document.body.offsetHeight + '<br/>' +
        'clientHeight: ' + document.body.clientHeight + '<br/>' +
        '<br/>' +
        'DOCUMENT_ELEMENT<br/>' +
        'scrollHeight: ' + document.documentElement.scrollHeight + '<br/>' +
        'offsetHeight: ' + document.documentElement.offsetHeight + '<br/>' +
        'clientHeight: ' + document.documentElement.clientHeight + '<br/>';
}

/* прокрутка страницы */
window.onscroll = function() {
    var scrollPx = window.pageYOffset + document.documentElement.clientHeight;
    content.title = scrollPx;
    
    if(scrollPx >= document.body.scrollHeight) {
        window.scrollTo(0, 0);
    }
}