JSFiddle - React, Tailwind, and code Playground

by SkeLLLa

HTML

<body style="height: 800px; overflow:hidden">
    <script>
        window.scrollBarWidth = (function() {
            var width = document.body.clientWidth;
            document.body.style.overflow = 'scroll';
            width -= document.body.clientWidth;
            if (!width) width = document.body.offsetWidth - document.body.clientWidth;
            document.body.style.overflow = 'auto';
            return width;
        })();
    </script>
    <div id="header" style="width: 1054px; margin: 0 auto; padding: 0 10px; position: relative; height: 50px; display: none;">
        <div id="red" style="background-color: red;display: block;width: 100%;height: 100%;"></div>
    </div>
    <script>
        document.getElementById('red').style.marginLeft = window.scrollBarWidth / 2;
        document.getElementById('header').style.display = 'block';
        window.onresize = function() {
            if (document.body.scrollHeight > document.body.clientHeight) {
                //scroll
                document.getElementById('red').style.marginLeft = window.scrollBarWidth / 2;
            } else {
                //noscroll
                document.getElementById('red').style.marginLeft = 0;
            }
        }
    </script>