JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="log"></div>
<div id="superContainer" style="background-color:#bbb;height:2000px; width:100%;">The overflowing div
    <div id="overflowingDivContainer" style="overflow:auto; width:100px; height:100px; background-color:#333; color:#fff; margin:auto;">
        <div id="overflowingContent" style="height:200px;">Another overflowing div element</div>
    </div>
</div>

CSS

html, body {
    margin: 0;
    padding-top:5px;
    padding-bottom:5px;
}
.yScrollBar {
    height: 100%;
    width: 10px;
    background-color: #ddd;
}
.yScrollBarButton {
    background-color: #bbb;
    width: 10px;
}
.xScrollBar {
    width: 100%;
    height: 10px;
    background-color: #ddd;
}
.xScrollBarButton {
    background-color: #bbb;
    height: 10px;
}
#log {
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    display: table;
    padding: 20px;
    font-size: 20px;
    background-color: #ddd;
    overflow:auto;
    box-sizing:border-box;
}

JavaScript

window.onload = function () {
    initializeScrollBars();

    function initializeScrollBars() {
        /*add styles for the scroll bar*/
        var css = '[data-superContainer]{overflow:hidden;} [data-scrollable]{overflow:auto;width:calc(100%+40px);}[data-innerContent]{width:100%;height:100%;}',
            head = document.head,
            styleTag = document.createElement('style');
        styleTag.type = 'text/css';
        if (styleTag.styleSheet) {
            styleTag.styleSheet.cssText = css;
        } else {
            styleTag.appendChild(document.createTextNode(css));
        }
        head.appendChild(styleTag);

        var documentElements = document.getElementsByTagName("*");
        var loopLength = documentElements.length;
        for (var i = 0; i < loopLength-1; i++) {
            var currentElement = documentElements[i];
            //mes(currentElement.nodeName);
            if(currentElement.nodeName.toLowerCase() == 'body' && currentElement.offsetHeight>window.innerHeight){
             	mes('add scroll bars to body');
            }else{
                mes(currentElement.nodeName+' | '+currentElement.offsetHeight+' | '+currentElement.parentNode.offsetHeight+' | '+currentElement.id);
             	if(currentElement.offsetHeight>currentElement.parentNode.offsetHeight){
                 	mes('add scroll bars to element');   
                }
            }
        }
        if(document.getElementById('overflowingContent').offsetHeight>document.getElementById('overflowingContent').parentNode.offsetHeight){
         //mes('overflow');   
        }
        /*[END] add styles for the scroll bar*/
    }

    //log message function for debugging etc...
    function mes(mes) {
        window.setTimeout(function(){
        document.getElementById('log').innerHTML += mes +'<br>';
        },0);
    }
    //[END] logging function
};