JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<div id="container">
    <div id="shell">Just some stuff to fill.</div> <div id="out"></div>

</div>

CSS

#shell {
    width:900px;
    background: rgba(233, 12, 44, .5);
}

JavaScript

var out = document.getElementById("out");
var winInnerHeight = window.innerHeight;
var winInnerWidth = window.innerWidth;
var bodyHeight = document.body.getBoundingClientRect().height;
var bodyWidth = document.body.getBoundingClientRect().width;
var bodyScrollWidth = document.body.scrollWidth;

var container = document.getElementById("container");
var conDimen = container.getBoundingClientRect();
var conRectH = conDimen.height;
var conRectW = conDimen.width;

out.innerHTML = "winInnerHeight: " + winInnerHeight + "<br>winInnerWidth: " + winInnerWidth + "<br>bodyHeight: " + bodyHeight + "<br>bodyWidth: " + bodyWidth + "<br>bodyScrollWidth: " + bodyScrollWidth + "<br>conRectH: " + conRectH + "<br>conRectW: " + conRectW;

out.innerHTML += "<br>VerticalScrollExist? " + VerticalScrollExist() + "<br>HorizontalScrollExist? " + HorizontalScrollExist() + "<br>HasHorizontalScroll? " + HasHorizontalScroll();

function VerticalScrollExist() {
    if (window.innerHeight) {
        return document.body.offsetHeight > innerHeight;
    } else {
        return document.documentElement.scrollHeight > document.documentElement.offsetHeight || document.body.scrollHeight > document.body.offsetHeight;
    }
}

function HorizontalScrollExist() {
    if (window.innerWidth) {
        return document.body.offsetWidth > innerWidth;
    } else {
        return document.documentElement.scrollWidth > document.documentElement.offsetWidth || document.body.scrollWidth > document.body.offsetWidth;
    }
}

function HasHorizontalScroll(){
     return document.body.scrollWidth > window.innerWidth;
}