JSFiddle - React, Tailwind, and code Playground

by klaascuvelier

HTML

<div class="scrollbars">
    <div class="ephemeral">You have "ephemeral" scrollbars</div>
    <div class="normal">You have "normal" scrollbars</div>
</div>

CSS

.scrollbars {
    font-family: verdana, sans-serif;
    font-size: 16px;
}

.scrollbars > div {
    padding: 100px 0;
    text-align: center;
}

.scrollbars .ephemeral {
    background: blue;
    color: white;
}

.scrollbars .normal {
    background: green;
    color: white;
}

.has-ephemeral-scrollbars .normal {
    display: none;
}

.has-normal-scrollbars .ephemeral {
    display: none;
}

JavaScript

(function checkScrollbars() {
'use strict';
    
    var scrollbarTester = document.createElement('div'),
        testerContent = document.createElement('div'),
        testerStyle = {
            position : 'fixed',
            display : 'block',
            top : '-99px',   
            left: '-99px',
            overflow : 'scroll',
            visibility : 'hidden',
            fontSize : 0,
            lineHeight : 0,
            width: '50px',
            minWidth: '50px',
            maxWidth: 'none',
            height: 'auto',
            minHeight: 0,
            maxHeight: 'none',
            padding: 0,
            margin: 0,
            border: 'none'
        },
        contentStyle = {
            display: 'block',
            width: '50px',
            minWidth: '50px',
            maxWidth: 'none',
            height: '50px',
            minHeight: 0,
            maxHeight: 'none',
            padding: 0,
            margin: 0,
            border: 'none'
        },
        styleKey;
    
    for (styleKey in testerStyle) {
        if (testerStyle.hasOwnProperty(styleKey)) {
            scrollbarTester.style[styleKey] = testerStyle[styleKey];
        }
    }

    for (styleKey in contentStyle) {
        if (contentStyle.hasOwnProperty(styleKey)) {
            testerContent.style[styleKey] = contentStyle[styleKey];
        }
    }
        
    scrollbarTester.appendChild(testerContent);
    document.body.appendChild(scrollbarTester);

    if (scrollbarTester.offsetHeight - testerContent.offsetHeight > 0) {
        // normal scrollbars
        alert('normal');
        document.body.className += "has-normal-scrollbars";
    } else {
        // ephemeral
        alert('ephe')
        document.body.className += "has-ephemeral-scrollbars";
    }
})();