JSFiddle - React, Tailwind, and code Playground

by cyber cyber

HTML

<div class="top page">
    <div class="content"></div>
</div>
<div class="bottom page"></div>

CSS

* {margin: 0; padding: 0;}

html, 
body {
overflow: hidden;
}

html, 
body,
.page, 
.content {
    width: 100%;
    height: 100%;  
   
}

.content { 
    overflow-y: auto;
}

.page{
    position: absolute;
    left: 0;
}

.content {
}

.top {
    top: 0;
    background-color: #2B313D;;
}
.bottom {
    top: 100%;
    background-color: green;
}

JavaScript

for(var i = 0, html = ""; i < 500; i++)
    html += i + "<br>";

//$(".content").html(html);
hidenScrollFix($(".page")[0])

function hidenScrollFix(elem) {
    elem.style.overflowY = "scroll";
    
    function isScrioll(elem) {
        return elem.clientHeight != elem.scrollHeight;
    }
}