JSFiddle - React, Tailwind, and code Playground

HTML

<div class="centered">
       I'm in the center
        
    <button id="toggler">Toggle Scrollbar</button>
</div>

CSS

html{
    height: 100%;
    overflow: auto;
    position: relative;
}
html.overflown{
    overflow: hidden;
}
body{
    height: 150%;
    position: relative;
}

.centered{
    position: relative;
    width: 300px;
    background: #efefef;
    margin-left: -150px;
    left: 50%;
}

JavaScript

$("#toggler").click(function(){
    $('html').toggleClass('overflown');
})

$(".centered").offset({left : $(".centered").offset().left});