JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<div class="w">
    <p></p>
</div>

<div class="n">
    <p></p>
</div>

<div class="w">
    <p></p>
</div>

<div class="n">
    <p></p>
</div>

<div class="h">
    <p></p>
</div>
<div class="w h">
    <p></p>
</div>

<div class="hid h w">
    <p></p>
</div>

<div class="vis h w">
    <p></p>
</div>

CSS

div {
    overflow: auto;
    border:1px solid #F00;
    height:200px; width:200px;
    display:inline-block;
}

div p {
    border:1px solid #00F;
    min-height:50px;
    min-width:50px;
}
div.h p {
    height: 200px;
}

div.w p {
    width: 200px;
}

div.hid {
    overflow: hidden;
}
div.vis {
    overflow: visible;
}

JavaScript

function isScroller(el) {
    var isScrollableWidth, isScollableHeight, elStyle;
    elStyle = window.getComputedStyle(el, null); // Note: IE9+
    if (elStyle.overflow === 'scroll' ||
        elStyle.overflowX === 'scroll' ||
        elStyle.overflowY === 'scroll') {
        return true;        
    }
    if (elStyle.overflow === 'auto' ||
        elStyle.overflowX === 'auto' ||
        elStyle.overflowY === 'auto') {
        if (el.scrollHeight > el.clientHeight) {
            return true;
        }
        if (el.scrollWidth > el.clientWidth) {
            return true;
        }
    }
    return false;
}

var els = document.querySelectorAll('body *');
for (var i = 0, el; el = els[i]; i++) {
    if (isScroller(el)) {
        console.log(el);
    }
}