JSFiddle - React, Tailwind, and code Playground

by willemvb

HTML

Body is centered and max. 600px
<br>
    <button id="toggler">Toggle Scrollbar</button>

CSS

html{
    height: 100%;
    overflow: auto;
    position: relative;
}
html.overflown{
    overflow: hidden;
    background: #ccc;
}
body{
    height: 150%; /*to have a scrollbar*/
    position: relative;
    max-width: 600px; 
    width: 100%;
    background: #efefef;
}

JavaScript

$(document).ready(function(){
    $("#toggler").click(function(){
        $('html').toggleClass('overflown');
    })
    fixCenterPos();
});
                  
$(window).resize(function(){
    fixCenterPos();
});

var b = $("body");

function fixCenterPos(){
    negativeOffset = '-' + (b.width()/2) + 'px';
    b
    .css({
        "left": "50%",
        "margin-left": negativeOffset})
    .offset({left:b.offset().left});
}